@charset "utf-8";
@media print {
	html, body {
		width: 1000px;
	}
	main {
		background: #000;
		margin: 0 !important;
	}
}
:root {
	--animate-duration: 1.5s;
    --animate-delay: 1.5s;
    --animate-repeat: 1;
}
main {
	width: 100%;
	margin: 0;
}
#contents {
	max-width: 750px;
	margin: 0 auto;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	text-align: center;
	background-color: #fff;
}
#lp_main a {
	display: block;
}
#lp_main img {
	max-width: 100%;
	margin: auto;
	vertical-align: bottom;
}
#lp_main .sp {
	display: block;
	max-width: 100%;
}
@media print, screen and (min-width: 640px) {
	#lp_main a:hover img {
        opacity: 0.75;
    }
}
.separator{
	position: relative;
	z-index: 2;
	line-height: 0;
}
.fv{
	position: relative;
}
.bb_cream_intro{
	padding: 6.66% 0 calc(6.66% + 39px);
}
.movie_wrap{
	position: relative;
	width: 100%;
}
video{
	width: 100%;
}
.mov01{
	position: absolute;
	line-height: 0;
    right: 7%;
    bottom: 0;
    margin: auto;
    z-index: 2;
    width: 86%;
}
.mov02{
	position: absolute;
	line-height: 0;
    right: 4%;
    top: 27%;
    margin: auto;
    z-index: 2;
    width: 86%;
}
.mov03{
	position: absolute;
	line-height: 0;
    left: 5.55%;
    bottom: 30%;
    margin: auto;
    z-index: 2;
    width: 85%;
}
.bb_cream_purchase{
	margin: -39px auto 0;
}
.bb_cream_purchase_wrap{
	background: #ecac97;
	padding: 6.66% 0;
}
.bb_cream_authority{
	position: relative;
	margin: -39px auto 0;
	padding: 6.66% 0;
	background: center top / cover no-repeat url(../images/bb_cream_authority_bg.webp);
}
.bb_cream_authority .caution {
	padding: 0 6.66%;
	text-align: right;
	color: #463833;
}
@media screen and (max-width: 750px){
	.bb_cream_intro{padding: 6.66% 0 calc(6.66% + 5vw);}
	.bb_cream_purchase{margin: -5vw auto 0;}
	.bb_cream_authority{margin: -5vw auto 0;}
	.bb_cream_authority .caution {font-size: 60%;letter-spacing: -1px;}
}
.z-01{
	position: relative;
}
.z-02{
	position: relative;
	z-index: 2;
}
.z-03{
	position: relative;
	z-index: 3;
}
.bb_cream_feature_intro .z-01{
	margin-top: -84px;
}
.bb_cream_feature_intro .z-03{
	position: absolute;
	top: 0;
}
@media screen and (max-width: 750px){
	.bb_cream_feature_intro .z-01{margin: -11vw auto;}
}
.flex{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 3.33%;
}
.bb_cream_feature{
	background: #ecac97;
	margin: -39px auto 0;
	padding: calc(6.66% + 39px) 0;
}
.bb_cream_feature .relative_box:not(:last-of-type){
	margin-bottom: 6.66%;
}
@media screen and (max-width: 750px){
	.bb_cream_feature{margin: -5vw auto 0;padding: calc(6.66% + 5vw) 0;}
}
.relative_box{
	position: relative;
}
.feature01 aside{
	position: absolute;
	bottom: 2%;
    right: 1%;
    width: 42%;
}
.feature01 aside > img{
	width: 100%;
}
.bb_cream_point{
	position: relative;
	margin: -39px auto 0;
	z-index: 2;
}
.bb_cream_point > div{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.bb_cream_free{
	position: relative;
	margin: -39px auto 0;
}
.bb_cream_free > div{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.bb_cream_free_under{
	position: relative;
	margin: -45px auto 0;
}
.bb_cream_chart{
	background: #f4cdb3;
	padding: 6.66% 0 calc(6.66% + 39px);
}
@media screen and (max-width: 750px){
	.bb_cream_point{margin: -5vw auto 0;}
	.bb_cream_free{margin: -5vw auto 0;}
	.bb_cream_free_under{margin: -6vw auto 0;}
	.bb_cream_chart{padding: 6.66% 0 calc(6.66% + 5vw);}
}
.bb_cream_howto{
	background: #f3f3f0;
}
.box{
	position: relative;
}
.onlymineral .box h2{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
}
.onlymineral_txt{
	background: #faf0ee;
	padding: 6.66% 0;
}
.onlymineral_txt div:nth-of-type(1){
	margin-bottom: 3.33%;
}
.onlymineral_item{
	margin-top: 6.66%;
}
.onlymineral_item_wrap{
	background: #f7e2d8;
	padding: 3.33%;
}
.onlymineral_item_wrap .box{
	background: #fff;
	padding: 3.33% 0;
	border-radius: 4px;
}
.onlymineral_item .box{
	margin-top: 68px;
}
.onlymineral_item .item_ttl {
	margin: -68px auto 39px;
}
.other{
	padding-bottom: 60px;
}
.other .other_item_list {
	width: 100%;
}
.other .other_item_list > li {
	width: 100%;
}
.caution_note{
	padding: 6.66% 3.33%;
}
.caution_note > div{
	background: #fff;
	font-size: 100%;
	max-height: 14rem;
	/*overflow-y: scroll;*/
	padding: 1rem;
	border-radius: 8px;
}
.caution_note > div b{
	font-weight: bold;
}
#lp_main .caution_note > div a{
	display: inline;
}
.text_btn a{
	margin-top: 16px;
	text-align: center;
	font-size: 140%;
	color: #fff;
	text-decoration: underline;
}
@media screen and (max-width: 640px){
	.text_btn a{font-size: 80%;}
	.caution_note > div{font-size: 80%;}
}
/* ----- 注文フォーム start ----- */

.product_order p {
	display: block;
	text-align: center;
}
.product_order .product_order_ttl {
	padding: min(40px, calc(40 / 750* 100vw)) min(10px, calc(10 / 750* 100vw));
	color: #fff;
	font-size: min(30px, calc(30 / 750* 100vw));
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	background-color: #ecac97;
}
.product_order .product_order_description {
	padding: min(25px, calc(25 / 750* 100vw)) min(10px, calc(10 / 750* 100vw));
	font-size: min(28px, calc(28 / 750* 100vw));
}
.product_order .product_select {
	border-bottom: min(2px, calc(2 / 750* 100vw)) solid #faf0ee;
}
.product_order .product_select > li {
	padding: min(30px, calc(30 / 750* 100vw)) 0;
	position: relative;
	text-align: center;
	border-top: min(2px, calc(2 / 750* 100vw)) solid #faf0ee;
	background-color: #faf0ee;
}
.product_order .product_select > li .product_select_name {
	color: #ecac97;
	font-size: min(30px, calc(30 / 750* 100vw));
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}
.product_order .product_select_name strong {
	background-color: #ffcaca;
}
.product_order .product_select_name small {
	font-size: min(26px, calc(26 / 750* 100vw));
}
.product_order .product_select > li .icon_off {
	position: absolute;
	top: min(10px, calc(10 / 750* 100vw));
	left: min(10px, calc(10 / 750* 100vw));
	width: min(120px, calc(120 / 750* 100vw));;
}

.product_order .product_select_color {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	box-sizing: border-box;
	margin: min(30px, calc(30 / 750* 100vw)) 0 0;
	padding: 0 3%;
}
.product_order .product_select_color li {
	width: 47%;
	max-width: 340px;
}
.product_order .product_select_color li input[type="radio"] {
    visibility: hidden;
	position: fixed;
}
.product_order .product_select_color li label {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding: min(166px, calc(166 / 750* 100vw)) min(6px, calc(6 / 750* 100vw)) min(6px, calc(6 / 750* 100vw));
	background-color: #fff;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	border: min(4px, calc(4 / 750* 100vw)) solid #fff;
	border-radius:  min(20px, calc(20 / 750* 100vw));
	cursor: pointer;
}
.product_order .product_select_color li label[for="1"] {
	background-image: url("../images/select_color_01.png");
}
.product_order .product_select_color li label[for="2"] {
	background-image: url("../images/select_color_02.png");
}
.product_order .product_select_color li label[for="3"] {
	background-image: url("../images/select_color_03.png");
}
.product_order .product_select_color li label[for="4"] {
	background-image: url("../images/select_color_04.png");
}
.product_order .product_select_color li label:hover {
	border: min(4px, calc(4 / 750* 100vw)) solid #fff;
}
.product_order .product_select_color li input:checked + label {
	border: min(4px, calc(4 / 750* 100vw)) solid #ecac97;
}
.product_order .product_select_color li label .select_button {
	width: 100%;
	padding: min(17px, calc(17 / 750* 100vw)) min(30px, calc(30 / 750* 100vw));
	color: #645c51;
	font-size: min(24px, calc(24 / 750* 100vw));
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	line-height: 1.1;
	border-radius: 99px;
	background-color: #f7e2d8;
}
.product_order .product_select_color li input:checked + label .select_button {
	background-image: url("../images/select_check.png");
	background-position: 6% center;
	background-repeat: no-repeat;
	background-size: min(24px, calc(24 / 750* 100vw)) auto;
}

/* ----- 注文フォーム end ----- */
.to_top {
	width: min(60px, calc(60 / 750* 100vw));
	margin:10px;
	position:fixed;
	right:0;
	bottom:0;
	font-size: 0;
	cursor: pointer;
	filter: drop-shadow(0px 5px 7px rgba(0,0,0,0.5));
}
@media (max-width: 767px) {
	.to_top {
		display: none !important;
	}
}

.btn_floating {
	position: fixed;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	right:0;
	left: 0;
	bottom:0;
	font-size: 0;
	cursor: pointer;
	z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s ease;
}

.btn_floating a:hover img {
	filter: brightness(80%);
	opacity: 1 !important;
}

.btn_floating.is-visible {
	opacity: 1;
	visibility: visible;
}

.footer__contents--link > dl > dt {
	font-family: var(--font-en);
	font-size: 1rem!important;
	font-weight: 600;
	letter-spacing: 0.075em;
}

.footer__contents--link > dl > dd > ul > li{
	font-size: .9rem!important;
}


.footer__contents--logo img{
	width: auto!important;
	margin: 0!important;
}



@media (min-width: 768px) {
	.footer__blk{
		padding: 5rem 2rem 4rem!important;
	}

	.footer__contents._left{
		width: 100%!important;
		padding-top: 7rem!important;
	}

	.footer__contents--link{
		justify-content: start;
		column-gap:10%;
	}

	.footer__contents--link > dl > dt{
		margin-bottom: 2rem!important;
	}

	.footer__contents--link > dl > dd > ul > li:nth-of-type(n+2){
		margin-top: .8rem!important;
	}

	.footer__copyright {
		padding: 1.4rem 0 2.7rem!important;
	}
}

@media (min-width: 1024px){
	.footer__blk{
		padding: 5rem 10rem 4rem!important;
	}
}

@media (max-width: 767px) {
	.footer__contents--link > dl > dt{
		padding: 1.5rem!important;
	}
	.footer__contents--logo{
		margin: auto!important;
		width: 11rem!important;
		top: 1.7rem!important;
	}
	.footer__blk{
		padding: 6.7rem 0 4rem!important;
	}
	.footer__copyright{
		padding: 1.9rem 0 2rem!important;
		background-color: #FFF!important;
	}

	.footer__contents--link > dl > dd > ul > li > a{
		padding: 1.4rem!important;
		font-size:.7rem!important;
	}

	.footer__contents--link > dl > dt{
		font-size:.9rem!important;
	}
}

/*2024_10_30追記*/

.webCm{
	display: flex;
	flex-flow: column;
	align-items: center;
	background: rgb(242,195,157);
	background: linear-gradient(180deg, rgba(242,195,157,1) 0%, rgba(213,158,112,1) 99%);
	padding: min(60px, calc(60 / 750* 100vw));
}

.jstreamContainer{
	max-width: 100%;
	width: 100%;
}

.jstreamContainer iframe{
	max-width: 100%;
	width: 100% !important;
	height: 360px!important;
}

.coolcomfort_movie{
	aspect-ratio: 1/1;
}

.webCm_heading{
	font-size: 2rem;
	margin-bottom: 1rem;
}

.webCm a{
	transition: .3s;
	&:hover{
		opacity: .7;
		transition: .3s;
	}

	&:active,
	&:link,
	&:visited,
	&:focus,
	&:hover{
		color: #333;
		text-decoration: underline;
	}
}

@media (max-width: 767px) {
	.webCm{
		padding: min(30px, calc(30 / 750* 100vw));
	}

	.webCm_heading{
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}

	.cta{
		margin-top: -2px;
	}

	.product_detail_block .product_point3 {
		margin: min(50px, calc(50 / 750* 100vw)) auto min(50px, calc(80 / 750* 100vw));
	}
}

/* アニメーション設定 */
@keyframes delighter-top_in {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	75% { opacity: 0.5; }
	100% {
		transform: none;
		opacity: 1;
	}
}
.animate-top_in.delighter{
	transform: translateY(-100%);
	opacity: 0;
	will-change: transform, opacity;
}
.animate-top_in.delighter.started {
	animation: delighter-top_in 1.2s ease-out both;
}

@keyframes delighter-bottom_in {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	75% {
		opacity: 0.5;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
.animate-bottom_in.delighter{
	transform: translateY(100%);
	opacity: 0;
	will-change: transform, opacity;
}
.animate-bottom_in.delighter.started {
	animation: delighter-bottom_in 1.2s ease-out both;
}

@keyframes delighter-pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}
.animate-pulse.delighter {
	will-change: transform;
}
.animate-pulse.delighter.started {
	animation: delighter-pulse 1s ease-in-out 1 both;
}