@charset "utf-8";

/*-------------------
animate
-------------------*/
.fadeup {
	opacity: 0;
	transition: opacity 1.4s, transform 0.8s;
	transform: translateY(100px);
}
.fadeup.show {
	opacity: 1;
	transform: translateY(0);
}
.animation {
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.yurayura {
	transform: rotate(10deg);
	animation-name: yurayura;
	animation-duration: 5s;
}
@keyframes yurayura {
	50% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}
.fuwafuwa {
	animation-name: fuwafuwa;
}
@keyframes fuwafuwa {
	0% {
		transform: translate(0, 0px);
	}
	100% {
		transform: translate(0, -15px);
	}
}

/*-------------------
sb-site
-------------------*/
div#sb-site {
	overflow: hidden;
	position: relative;
	color: #463720;
	font-size: 18px;
	text-align: center;
	line-height: 1.5em;
	padding: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-style: normal;
}

/*-------------------
main
-------------------*/
.main {
	position: relative;
	width: 100%;
}

/*---------------
main-contents
---------------*/
.main-contents {
	position: relative;
}
.main-contents .reserve {
	position: fixed;
	z-index: 2;
	right: 1vw;
	bottom: 1vw;
	width: 17vw;
	margin: 0 auto;
}
.main-contents a:hover img {
	opacity: 0.6;
	transition-duration: 0.3s;
}

/*---------------
birth
---------------*/
#birth div {
	margin: 80px auto 0;
	background: #fff;
}
#birth h2 {
	position: relative;
	width: 100%;
	padding: 46px 0 40px;
	font-size: 170%;
	line-height: 1em;
	font-weight: 700;
}
#birth h2:before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 576px;
	height: 13px;
	margin: 0 auto;
	background: url(../images/birth/line.png) top center / contain no-repeat;
	content: "";
}
#birth h2:after {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 576px;
	height: 13px;
	margin: 0 auto;
	background: url(../images/birth/line.png) bottom center / contain no-repeat;
	content: "";
}
#birth div > p {
	margin: 70px auto 0;
}
#birth ul {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center;
	-webkit-justify-content: center;
	width: 82%;
	margin: 20px auto 0;
}
#birth li {
	width: 14.66%;
	margin: 70px 1% 0;
}
#birth li .name {
	display: inline;
	font-size: 130%;
}
#birth .kiui .name {
	background: linear-gradient(transparent 60%, #e3f399 0%);
}
#birth .orange .name {
	background: linear-gradient(transparent 60%, #ffe4bd 0%);
}
#birth .melon .name {
	background: linear-gradient(transparent 60%, #ddfab7 0%);
}
#birth .banana .name {
	background: linear-gradient(transparent 60%, #faf494 0%);
}
#birth .pain .name {
	background: linear-gradient(transparent 60%, #fef3a0 0%);
}
#birth .ichigo .name {
	background: linear-gradient(transparent 60%, #ffddd7 0%);
}
#birth .cherry .name {
	background: linear-gradient(transparent 60%, #ffd3d3 0%);
}
#birth .budou .name {
	background: linear-gradient(transparent 60%, #f9d6fd 0%);
}
#birth .muscat .name {
	background: linear-gradient(transparent 60%, #ebfab7 0%);
}
#birth .ringo .name {
	background: linear-gradient(transparent 60%, #fce3e1 0%);
}
#birth .lemon .name {
	background: linear-gradient(transparent 60%, #fdfab6 0%);
}
#birth .grapefruit .name {
	background: linear-gradient(transparent 60%, #feebe7 0%);
}
#birth .peach .name {
	background: linear-gradient(transparent 60%, #febcac 0%);
}
#birth li img {
	margin: 25px auto 0;
}
#birth li .mean {
	margin: 30px auto 0;
}

/*---------------
fruits_box
---------------*/
.fruits_box {
    width: 90%;
    margin: 0 auto;
}
.fruits_box > div {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	margin: 70px auto 0;
}
#new.fruits_box > div {
	margin-top: 100px;
}
.fruits_box .img {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	width: 60%;
}
.fruits_box .img img {
	width: 100%;
	height: auto;
}
.fruits_box .thumb {
	width: 37%;
}
.fruits_box.img_left .thumb {
	margin-right: 2%;
	text-align: left;
}
.fruits_box.img_right .thumb {
	order: 1;
	margin-left: 2%;
	text-align: right;
}
.fruits_box.img_right .img {
	order: 2;
}
.fruits_box .thumb h2 {
	width: 54%;
}
.fruits_box .thumb p {
	margin: 50px auto 0;
}
.fruits_box.img_right .thumb p {
	text-align: left;
}
.fruits_box .thumb ul {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center;
	-webkit-justify-content: center;
	margin: 25px auto 0;
}
.fruits_box .thumb ul li {
	width: 30.33%;
	margin: 15px 3% 0 0;
}
.fruits_box .thumb ul li:nth-child(3),
.fruits_box .thumb ul li:nth-child(6) {
	margin-right: 0;
}
.fruits_box .thumb ul li a {
	display: block;
	position: relative;
}
.fruits_box .thumb ul li a:before {
	display: block;
	position: absolute;
	right: 5px;
	bottom: 5px;
	max-width: 36px;
	width: 2vw;
	max-height: 36px;
	height: 2vw;
	background: url(../images/icon_zoom.png) center center / contain no-repeat;
	content: "";
}
.fruits_box .thumb ul li img {
	border-radius: 10px;
}

/*---------------
footer
---------------*/
footer {
	position: relative;
	margin: 200px auto 0;
	padding: 100px 0;
	background: #f5fcde;
}
footer:before {
	display: block;
	position: absolute;
	top: -4vw;
	right: 0;
	left: 0;
	width: 100%;
	height: 4vw;
	margin: 0 auto;
	background: url(../images/footer/bg_top.png) top center / cover no-repeat;
	content: "";
}
footer .fun {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center;
	-webkit-justify-content: center;
}
footer .fun div {
	max-width: 416px;
	width: 25%;
	margin: 0 0.5%;
}
footer .plan {
	margin: 80px auto 0;
}

/*--------------------
sp
---------------------*/
@media screen and (max-width:640px) {
    .fadeup {/* スマホではアニメーションさせない */
    	opacity: 1;
        transform: translateY(0);
    }
	/* ----- sb-site ----- */
	#wrapper div#sb-site {
		padding-top: 0;
	}
	#sb-site {
		font-size: 16px;
	}

	/* ----- main-contents ----- */
	.main-contents .reserve {
		width: 40vw;
	}

	/* ----- birth ----- */
	#birth div {
        padding-bottom: 60px;
        margin: 0 auto;
        padding: 100px 0 60px;
    }
	#birth h2 {
		font-size: 140%;
		padding-top: 36px;
		padding-bottom: 30px;
	}
	#birth h2:before,
	#birth h2:after {
		width: 100%;
	}
	#birth div > p {
		margin-top: 40px;
        width: 95%;
	}
	#birth ul {
		width: 97%;
		margin-top: 0;
	}
	#birth li {
		width: 48%;
		margin-top: 30px;
	}
	#birth li img {
		display: block;
		width: 70%;
		margin-top: 10px;
	}
	#birth li .mean {
		margin-top: 10px;
	}

	/* ----- fruits_box ----- */
	.fruits_box {
		width: 100%;
	}
	#new.fruits_box > div {
		margin-top: 60px;
	}
	.fruits_box > div {
		display: block;
		position: relative;
	}
	.fruits_box .img {
		width: 85%;
	}
	.fruits_box.img_left .img {
		margin-right: 2vw;
		margin-left: auto;
	}
	.fruits_box.img_right .img {
		margin-right: auto;
		margin-left: 2vw;
	}
	.fruits_box .thumb {
		width: 95%;
		margin-right: auto;
		margin-left: auto;
	}
	.fruits_box .thumb h2 {
		top: -10vw;
		width: 35%;
	}
	.fruits_box.img_left .thumb h2 {
		position: absolute;
		left: 2vw;
	}
	.fruits_box.img_right .thumb h2 {
		position: absolute;
		right: 2vw;
	}
	.fruits_box .thumb p {
		margin-top: 20px;
	}
	.fruits_box .thumb ul {
		width: 100%;
		margin-top: 5px;
	}
	.fruits_box .thumb ul li a:before {
		width: 20px;
		height: 20px;
	}

	/* ----- footer ----- */
	footer {
		margin-top: 90px;
		padding-top: 40px;
		padding-bottom: 140px;
	}
	footer .fun div:nth-child(1) {
		width: 100%;
	}
	footer .fun div:nth-child(1) img {
		width: 50%;
	}
	footer .fun div {
		width: 45%;
	}
	footer .plan {
		width: 80%;
		margin-top: 40px;
	}
}