@charset "UTF-8";
/*-----------------------------------
  スマホ用
-----------------------------------*/

.lp-bg {
	background-image: url(../image/bg-top.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	background-color: #F3F4CF;
}

#lp-content {
	position: relative;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}
#lp-content > .content{
	margin: 0;
	padding: 0;
	background-image: url(../image/bg-bottom.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
}
.section {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.container {
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5px;
	position: relative;
	padding: 0;
	width: 100%;
}
.page-header {
	text-align: center;
	position: relative;
	padding: 0;
	width: 100%;
	margin: 0 auto;
	background-image: url(../image/leaf.webp);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}

.ball {
	width: 13%;
	height: 13%;
	background-image: url("../image/boll.webp");
	background-position: center center;
	background-size: 90% auto;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 15%;
	left: 15%;
	animation: bounce 1s infinite;
	transform-origin: bottom center;
}
@keyframes bounce {
	0% {
		transform: translateY(0) scaleX(1) scaleY(1);
		animation-timing-function: ease-in;
	}

	10% {
		/* 床に当たる瞬間 */
		transform: translateY(0) scaleX(1.15) scaleY(0.85);
	}

	20% {
		/* 跳ね返り */
		transform: translateY(-100px) scaleX(0.95) scaleY(1.05);
		animation-timing-function: ease-out;
	}

	45% {
		transform: translateY(-70px) scaleX(1) scaleY(1);
		animation-timing-function: ease-in;
	}

	60% {
		transform: translateY(0) scaleX(1.15) scaleY(0.85);
	}

	70% {
		transform: translateY(-40px) scaleX(0.98) scaleY(1.02);
		animation-timing-function: ease-out;
	}

	100% {
		transform: translateY(0) scaleX(1) scaleY(1);
	}
}

.title {
	display: block;
	width: 50%;
	opacity: 0;
	transform: scale(0.4, 0.4);
	animation: ponyon 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	transform-origin: center center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 25%;
	padding-bottom: 25%;
}

@keyframes ponyon {
  0% {
    opacity: 0;
    transform: scale(0.4, 0.4);
  }

  30% {
    opacity: 1;
    transform: scale(1.12, 0.92);
  }

  50% {
    transform: scale(0.94, 1.06);
  }

  68% {
    transform: scale(1.04, 0.97);
  }

  82% {
    transform: scale(0.985, 1.015);
  }

  92% {
    transform: scale(1.01, 0.995);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}


.shop {
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    margin-top: 10px;
}
.shop.shop-h {
	color: #C80E47;
}
.shop.shop-a {
	color: #9CC83B;
}
.itemprice {
	font-size: 16px;
	line-height: 24px;
	margin-top: 10px;
	color: #E68312;
	font-weight: bold;
}
.itemprice-s {
	color: #E68312;
	line-height: 1.4em;
	margin-top: 5px;
	font-size: 14px;
}
.item-txt {
	color: #72562B;
	font-size: 14px;
	line-height: 22px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.item-txt strong {
    font-size: 110%;
}
.item-txts {
	color: #795400;
	font-size: 12px;
	line-height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.tokuten {
	color: #5B9D70;
	font-size: 14px;
	line-height: 22px;
	font-weight: bold;
}
.fontdown {
    font-size: 80%;
}
.shopBox .photo {
    position: relative;
}

.swiper-container{
	width: 100%;
	overflow: hidden;
}
 



	#footer{
    margin-top: 0;
    z-index: 999;
}
	#footer .footer-navi > .item{ width: 50%; height: 90px;}
    #footer .footer-navi > .item a{ display: block; color: #ffffff; font-weight: bold; text-decoration: none; padding: 10px 0; }
	#footer .footer-caption{ margin: 0 15px; padding: 15px 0; text-align: left; }
    #footer .footer-navi > .navi-hoop { float: left; background-color: #bf153e;}
    #footer .footer-navi > .navi-and{ float: right; background-color: #87c022;}
	#footer .footer-navi > .item .txt{ font-size: 12px; line-height: 10px; }
    #footer .footer-navi > .item .txt img{ vertical-align: bottom; }
	#footer .footer-navi > .item .logo img{ vertical-align: middle; width: 40%; height: 40%; vertical-align: middle;}
    #footer .footer-navi > .item .logo{ display: inline-block; }
	#footer .copyright p{
    font-size: 12px;
    background-color: #000000;
}