@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200&display=swap');

/* --------------------------------
 ヘッダ 帯
-------------------------------- */
#extraHead{
	display:block;
	overflow:hidden;
    padding: 26px 0;
  	background:#fff;
	color:#d54f6a;
    font-size: 22px;
    line-height:140%;
    text-align: center;
    letter-spacing:0.1em;
    font-weight:500;
}

#extraHead br{
	display:none;
}

@media (max-width: 768px) {
	#extraHead{
	    padding: 6vw 0;
	    font-size: 2.2rem;
	}
	#extraHead br{
		display:initial;
	}
}

.innerFrame{
	width:100%;
	overflow:visible;
}

#lpbody{
	display:block;
	overflow:hidden;
	width:100%;
	max-width:400px;
	margin:0 auto;
	font-weight:400!important;
	box-shadow: 0px 0px 10px #d7d7d7;
}

@media (max-width: 768px) {
	#lpbody{
		max-width:640px;
	}
}

#lpbody img{
	width:100%;
}

sup{
	font-size:clamp(10px, 0.7em, 1.4rem);
	top:-1em;
}

.mt{
	margin-top:6em;
}
.pt{
	padding-top:6em;
}
.mt_s{
	margin-top:3em;
}

.mb{
	margin-bottom:4em;
}
.mb_s{
	margin-bottom:1em;
}

.ms{
	margin-left:3em;
	margin-right:3em;
}
.ms2{
	margin-left:2em;
	margin-right:2em;
}

.pb{
	padding-bottom:4em;
}
.lh{
	line-height:40px;
}

@media (max-width: 768px) {
	.mt{
		margin-top:4em;
	}
	.mt_s{
		margin-top:2em;
	}
	.mb_s{
		margin-bottom:1em;
	}
	.ms{
		margin-left:2em;
		margin-right:2em;
	}
}




/*LPをスライドする事にコンテンツがふわっと出てくる*/

.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}


.toptobottom {
  opacity: 0;
  transform: translateY(-30px); /* 上にずらしておく */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.toptobottom.visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る＝上から下にフワッと */
}


.lefttoright {
  opacity: 0;
  transform: translateX(-20px); /* 左にずらしておく */
  transition: opacity 1s ease-out, transform 1s ease-out;
	 transition-delay: 0.5s; /* ←ここでディレイを調整 */

}

.lefttoright.visible {
  opacity: 1;
  transform: translateX(0); /* 元の位置に戻る＝左→右にフワッと */
}






/* --------------------------------
	Offer
-------------------------------- */
.prd .btn_ttl{
	position:relative;
}

.prd .abs{
	position:absolute;
	width:80%;
	top:35%;
	left:10%;
	
}
.prd .abs img{
	 box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.4);
	  border-radius: 8px;

}

.prd .b_bg{
	position:relative;
}

.prd .b_abs{
	position:absolute;
	width:80%;
	top:10%;
	left:10%;
}


/* --------------------------------
worries
-------------------------------- */
.blue_bg{
	background: #cfd8de;
}

.rela{
	position:relative;
}

.pink_arrow img{
	position:absolute;
	top:45%;
	left:30%;
	width: 50%!important;	
}

.circle img{
	position:absolute;
	top:25%;
	right:5%;
	width: 60%!important;	
}

.dry img{
	position:absolute;
	top:20%;
	right:6%;
	width: 88%!important;	
}

.veg img{
	position:absolute;
	top:41%;
	right:4%;
	width: 92%!important;	
}

.dense_img_txt img{
	position:absolute;
	top:15%;
	left:6%;
	width: 28%!important;	
}

.item_graduate_txt img{
	position:absolute;
	top:11%;
	left:11%;
	width: 25%!important;	
}

.pi_last_txt img{
	position:absolute;
	top:9%;
	right:5%;
	width: 27%!important;
}


/* --------------------------------
item
-------------------------------- */


.flt_left{
	font-size: 12px;
	float:left;
	margin:5% 0 10% 10%;
	border-bottom:solid 1px;
}

.flt_right{
	font-size: 12px;
	float:right;
	margin:5% 10% 10% 0;
	border-bottom:solid 1px;
}

.wrap_eclat_about, .wrap_pi_about{
	position:relative;
}

.pop_eclat{
	position:absolute;
	font-size: 12px;
	border-bottom:solid 1px;
	bottom:3%;
	right:5%;
}

.pop_pi{
	position:absolute;
	font-size: 12px;
	border-bottom:solid 1px;
	bottom:0;
	right:5%;
}

.c-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.c-carousel__activator-main {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.c-carousel__main {
  overflow: hidden;
  position: relative;
}
.c-carousel__main-track {
  display: flex;
  white-space: nowrap;
  transition: transform 0.3s ease-out;
}
.c-carousel__main-item {
  flex-shrink: 0;
  width: 100%;
	margin-top:20px;
}
.c-carousel__main-image {
  display: block;
  width: 100%;
}

.c-carousel__main-control-item {
  display: none;
}
.c-carousel__btn-prev-main, .c-carousel__btn-next-main {
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 32px;
  transform: translateY(-50%);
  border-radius: 50%;
  transition: opacity 0.3s;
  cursor: pointer;
}
.c-carousel__btn-prev-main{
  right: auto;
  left: 16px;
}
 /*②ボタンエリア解説 開始*/
.c-carousel__activator-main:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(1) {
  display: block;
}
.c-carousel__activator-main:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(2) {
  display: block;
}
.c-carousel__activator-main:nth-child(3):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(3) {
  display: block;
}

.c-carousel__activator-main_eclat:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-control-item_eclat:nth-child(1) {
  display: block;
}
.c-carousel__activator-main_eclat:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-control-item_eclat:nth-child(2) {
  display: block;
}

.c-carousel__activator-main_pi:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-control-item_pi:nth-child(1) {
  display: block;
}
.c-carousel__activator-main_pi:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-control-item_pi:nth-child(2) {
  display: block;
}

 /* ②ボタンエリア解説 終了*/
 /*①スライドエリア解説 開始 */
.c-carousel__activator-main:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-track {
  transform: translateX(calc(-100% * 0));
}
.c-carousel__activator-main:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-track {
  transform: translateX(calc(-100% * 1));
}
.c-carousel__activator-main:nth-child(3):checked ~ .c-carousel__main .c-carousel__main-track {
  transform: translateX(calc(-100% * 2));
}

.c-carousel__activator-main_eclat:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-track {
  transform: translateX(calc(-100% * 0));
}
.c-carousel__activator-main_eclat:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-track {
  transform: translateX(calc(-100% * 1));
}

.c-carousel__activator-main_pi:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-track {
  transform: translateX(calc(-100% * 0));
}
.c-carousel__activator-main_pi:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-track {
  transform: translateX(calc(-100% * 1));
}
 /* ①スライドエリア解説 終了*/



/* --------------------------------
nfd
-------------------------------- */
#prd05{
	-webkit-padding-before:0!important;
	padding-block-start:0!important;
}




/* --------------------------------

 アコーディオン

-------------------------------- */
#qa{
	background: url(../images/last/last_qa.webp) no-repeat;
	background-size:contain;
	color:#594f45;
}

.qa_inner{
		display:block;
		overflow:hidden;
		padding-top:110px;
}
.qa_inner > section{
		display:block;
		overflow:hidden;
		width:90%!important;
		width:var(--container-mid);
		margin:0 auto;
		font-size:14px;
		line-height:175%;
}
.qa_inner > section + section{
		margin-top:1em;
}
.qa_inner input{
		display:none;
}

.qa_inner label{
		display:block;
		overflow:hidden;
		padding:0.5em 0.5em;
		background-color:#f5f2eb;
		font-size:16px;
		line-height:125%;
		position:relative;
		cursor:pointer;
}

.qa_inner label > *{
		vertical-align:middle;
}
.qa_inner .accBody{
		display:block;
		overflow:hidden;
		height:0;
		padding:0 1em;
		border-top:none;
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	background: #f5f2eb;
}

.qa_inner input:checked + label > span.icnOc::before,
.qa_inner input:checked + label > span.icnOc::after{
		transform:rotateZ(0);
}
.qa_inner input:checked + label + .accBody{
		height:auto;
		padding:1em 1em;
}
.qa_inner .accBody h5{
		font-weight:bold;
		font-size:16px;
		margin-bottom:0.25em;
}
.qa_inner .accBody h5:nth-child(n + 2) {
		margin-top:1em;
}
.qa_inner .accBody h5 > br{
		display:none;
}
.qa_inner .accBody ul + h5{
		margin-top:1em;
}
.qa_inner .accBody a{
		display:initial;
		text-decoration:underline;
}
.qa_inner .accBody > p{
		margin-top:1em;
}
.qa_inner .accBody h5 + ul,
.qa_inner .accBody h5 + p{
		margin-top:0;
		margin-left:1em;
}
.qa_inner .accBody > p.cautionTxt{
		text-indent:-1em;
		padding-left: 1em;
}
.qa_inner .accBody > p.cautionTxt + p.cautionTxt{
		margin-top:0.25em;
}

.qa_inner ul{
		display:block;
		overflow:hidden;
		list-style-type:disc;
		padding-left:1.5em;
}

.qa_inner p span{
	font-size:0.7em;
	line-height:2em;
}

span.icnOc{
	background-color:#d54f6a!important;
}

@media (max-width: 768px) {
		
		.qa_inner > section{
				width:100%;
				font-size:1.4rem;
		}
		.qa_inner label{
				font-size:1.6rem;
		}
		.qa_inner .accBody h5{
				font-size:1.6rem;
		}
		.qa_inner .accBody h5 + ul{
				margin-left:0;
		}
		.qa_inner ul > li{
				word-break: break-all;
		}
}




.gray{
	background: #f2f1f0;
}



/* --------------------------------
popup
-------------------------------- */
.popup {
	width: 100%;
	margin: auto;
	padding: 0;
	padding-bottom:80px;
	text-align: center;
}

.remodal {
	max-width: 100vw;
}

.remodal img {
	max-width: 100%;
}

#popup1 .remodal-close, #popup2 .remodal-close, #popup3 .remodal-close, #popup4 .remodal-close{
top: auto;
	bottom: 1.5vw;
	left: 30%;
	width: 37%;
	
}

@media (max-width: 768px) {
#popup1 .remodal-close, #popup2 .remodal-close, #popup3 .remodal-close, #popup4 .remodal-close{
	bottom: 4vw;
}
}

.remodal-close:before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 7vw;
	content: "";
	text-align: center;
	background: url(../images/btn_close.png) no-repeat;
	background-size: contain;
	-webkit-transition: 0.25s;
	transition: 0.25s;
}

.remodal-close_x {
	position: absolute;
	display: block;
	border: none;
	height: 5vw;
	content: "";
	text-align: center;
	background: url(../images/btn_close_x.png) no-repeat;
	background-size: contain;
	-webkit-transition: 0.25s;
	transition: 0.25s;
}
#popup1 .remodal-close_x, #popup2 .remodal-close_x, #popup3 .remodal-close_x, #popup4 .remodal-close_x{
	top: 4%;
	left: 90%;
	width:5%;
}

.remodal-close:hover:before,.remodal-close_x:hover:before {
	opacity: 0.5;
}
.remodal-overlay {
	background: rgba(43, 46, 56, 0.95);
}

#shopInfo label{
	background-color:#f5f2eb;
}

/* --------------------------------

 クーポンコード

-------------------------------- */
.cpCode{
	background: #d54f6a;
	color: #fff;
	display:block;
	overflow:hidden;
	text-align:center;
	line-height:125%;
    position:relative;
	padding:10px 0;
}
.cpCode > h4{
	display:block;
	overflow:hidden;
	font-size:24px;
	line-height:155%;
	font-weight:500;
	letter-spacing:0.01em;
	margin: 0 0;
}
.cpCode > p{
	display:block;
	overflow:hidden;
	font-size:20px;
	line-height:155%;
}
.cpCode > p > span{
	margin-right:0.5em;
}
.cpCode strong{
	font-size:24px;
	color:#fff;
	font-weight:700;
}

@media (max-width: 768px) {
	.cpCode{
	    padding:0.5em 0 0.9em;
	}
	.cpCode > h4{
	    font-size:2.2rem;
	}
	.cpCode > p{
	    font-size:1.6rem;
	    text-align:center;
	    margin: 0 0;
	}
	.cpCode strong{
		overflow:hidden;
	    font-size:2.2rem;
	}
}