@charset "UTF-8";
/* CSS Document */

/* --------------------------------
共通
-------------------------------- */
.em {
	background:linear-gradient(transparent 50%, #fffe86 0%);
}

.pconly{
	display:block;
}

.sponly{
	display:none!important;
}

.fc {
	color: #2ca03b;
	font-weight: bold;
}
.center {
	text-align: center;
}

.inner {
	padding: 3rem 2rem 3rem;
}

.btn--base {
	margin: 2rem auto 0;
}

.soldout_area {
	margin: 2rem auto 0;
	border: 0.1rem solid #5d5d5d;
    background-color: #5d5d5d;
    color: var(--clr-btn, #fff);
    letter-spacing: 0.05em;
	text-align: center!important;
	height: var(--h-btn, 6rem);
	display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;
}

@media screen and (max-width: 768px) {
	.pconly{
		display:none;
	}

	.sponly{
		display:block!important;
	}

	.inner02 {
		padding: 1em 3rem 1rem;
	}
	.inner03 {
		margin: 2em 3rem;
		padding: 2em 3rem;
		background-color: white;
	}
	.inner03 p {
		font-size: 1.5rem;
		margin-top: 2rem;
	}
}
@media screen and (min-width: 769px) {

	.inner02 {
		margin: 1em auto 2rem;
		width: 80rem;
	}
	.inner03 {
		margin: 1em auto 1rem;
		background-color: white;
		padding: 5rem!important;
		width: 80rem;
	}
	.inner03 p {
		/*padding: 1em 3rem 1rem;*/
		font-size: 1.6rem;
		margin-top: 4rem;
	}
	.inner04 {
		margin: 2em auto 3rem;
		width: 70rem;
	}
	.inner04 p {
		/*padding: 1em 3rem 1rem;*/
		font-size: 1.6rem;
	}
	.btn--base {
		width: 40rem;
		font-size: 2.4rem;
	}
	.soldout_area {
		width: 40rem;
		font-size: 2.4rem;
	}
}

.pcbr{
	display:block;
}

.spbr{
	display:inline;
}

article p {
	font-size: 1.8rem;
	line-height: 2.0;
}

.arrow{
	position: relative;
	padding: 0 0 0 16px;
}

article .arrow a {
	color: #2ca039;
	border-bottom: 1px solid #2ca039;
}

.arrow::before{
    content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    left: 0;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 5px solid transparent;
    border-left: 8px solid #2ca039;   /* 好みで色を変えてください */  
}

.arrow a {
	display: inline;
}

.textArea {
	background: #dedde1;
	font-family: var(--ff-heading, var(--font-NotoSerif));
}
.textArea .inner {
	padding: 0 2rem 5rem;
}

.textArea .product-inner {
	margin: 0 2rem 0;
	padding: 2rem 2rem 4rem;
	background: white;
}


@media screen and (max-width: 768px) {
	
	.pcbr{
		display:inline;
	}

	.spbr{
		display:block;
	}
	
	p {
		font-size: 1.6rem;
		line-height: 1.8;
	}
}

@media screen and (min-width: 769px) {
	article {
		width: 500px;
		margin: 0 auto;
	}
	.textArea p.inner {
		font-size: 2.2rem;
		line-height: 45px;
	}
	.textArea p.inner span.lrg {
		font-size: 4.2rem;
	}
}
@media screen and (max-width: 768px) {
	article {
		width: 100%;
	}
	.textArea p.inner {
		font-size: 1.8rem;
		line-height: 35px;
	}
	.textArea p.inner span.lrg {
		font-size: 3.6rem;
	}
}

/* --------------------------------
present01
-------------------------------- */


@media screen and (min-width: 769px) {
	#present01 {
	}

}
@media screen and (max-width: 768px) {
	#present01 {
	}
}

/* --------------------------------
sec01
-------------------------------- */
#sec01 {
	margin-top: 3rem;
	background-color: #dedde1;
}
#sec01 p.inner {
	font-family: var(--ff-heading, var(--font-NotoSans));
	padding: 1rem 2rem 3rem!important;
}

@media screen and (min-width: 769px) {
	#sec01 p.inner {
		font-size: 2.0rem;
	}

}
@media screen and (max-width: 768px) {
	#sec01 p.inner {
		font-size: 1.6rem;
	}
}

/* --------------------------------
sec02,sec04,sec04,sec05
-------------------------------- */
#sec02 #movArea, #sec03 #movArea, #sec04 #movArea {
	position: relative;
}
#sec02 #movArea h2, #sec03 #movArea h2, #sec04 #movArea h2 {
	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 999999;
}

#sec02 .textArea,#sec03 .textArea, #sec04 .textArea {
	padding-bottom: 8rem;
}

#sec05 h2 {
	padding: 3rem 0;
}


/* --------------------------------
offer
-------------------------------- */
#offer {
	margin-top: 5rem;
}

#offer #offer_delivery_free {
	background: #f5f5e0;
	padding: 2rem 2rem;
}
#offer #offer_delivery_free h2 {
	padding-top: 0;
}
#offer #offer_delivery_free p {
	padding-top: 1rem;
	font-family: var(--ff-heading, var(--font-NotoSans));
}

#offer_present {
	background: #c1b4c2;
	padding: 2rem;
}
#offer_present .inner {
	background: white;
	padding: 2rem;
}
#offer_present h2 {
	margin-top: 1rem;
}
#offer_present .inner p {
	margin-top: 2rem;
	font-family: var(--ff-heading, var(--font-NotoSans));
}

#offer_set h3 {
	margin-top: 5rem;
}
@media screen and (min-width: 769px) {
	#offer #offer_delivery_free p, #offer #offer_present p {
		font-size: 2.0rem;
	}

}
@media screen and (max-width: 768px) {
	#offer #offer_delivery_free p, #offer #offer_present p {
		font-size: 1.5rem;
	}
}

#offer .boxintro {
	background: #f5f5e0;
}
#offer .boxintro .inner {
	padding-top: 0;
	padding-bottom: 5rem;
}
#offer .boxintro .inner div {
	padding-top: 5rem;
}

#offer img {
	margin-bottom: 1rem;
}

#offer h2 {
	font-family: var(--ff-heading, var(--font-NotoSans));
}

#offer .btn--base --forward a {
	text-align: center;
}

#offer .btn--base {
	margin-inline: auto;
}
#offer p.jbig, #offer-recommend p.jbig {
	font-size: 1.6rem;
	text-align: center;
	margin-top: 1rem;
}

#offer .shoptxt {
	margin-bottom: 3rem;
	font-size: 1.6rem;
}
#offer .shopbtn {
	margin-bottom: 5rem;
}

#offer p.attention {
	margin-top: 5rem;
	font-size: 1.0rem;
}
#offer #offer01, #offer #offer02, #offer #offer03, #offer #offer04, #offer #offer05, #offer #offer06, #offer #offer07, #offer #offer08, #offer #offer09, #offer #offer10, #offer #offer11 {
	margin-top: 5rem;
}

#offer_set.inner {
	padding-top: 0;
}

@media screen and (min-width: 769px) {
	#offer .btn--base span.btn-sml, #offer-recommend .btn--base span.btn-sml, #offer-recommend .soldout_area span.btn-sml {
		font-size: 1.9rem;
	}
	
	#offer .border {
		width: 50%;
		margin: 8rem auto;
	}

	#offer .shoptxt {
		text-align: center;
	}
	#offer #offer02, #offer #offer03, #offer #offer04, #offer #offer05, #offer #offer06, #offer #offer07, #offer #offer08, #offer #offer09, #offer #offer10, #offer #offer11 {
	margin-top: 8rem;
}

}


/* --------------------------------
shop
-------------------------------- */
@media screen and (max-width: 768px) {
	.shop {
		padding: 5rem 2rem;
	}
}

@media screen and (min-width: 769px) {
	.shop {
		padding: 5rem 0 8rem;
	}
	.shop .btn--base {
		margin-inline: auto;
	}
}


/* --------------------------------
recommend
-------------------------------- */
#recommend .inner {
    padding: 2rem 2rem 3rem;
}
#recommend .btn-block {
	margin-top: 2rem;
}


/* --------------------------------
カルーセル
-------------------------------- */
.single { max-width: 600px; margin: 3rem auto 0;}
.single img{ width: 100%;}

.slick-next, .slick-prev {
	z-index: 9999;
}

.slick-prev:before, .slick-next:before {
    opacity: 1;
    color: #b2a06e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (min-width: 769px) {
	.slick-next {
		right: 5px;
	}
	.slick-prev {
		left: -15px;
	}
	.slick-prev:before, .slick-next:before {
    	font-size: 40px;
    	line-height: 0.5;
	}
}
@media screen and (max-width: 768px) {
	.slick-next {
		right: -10px;
	}
	.slick-prev {
		left: -10px;
	}
	.slick-prev:before, .slick-next:before {
    	font-size: 20px;
    	line-height: 1;
	}
}