<?php
/*
 Theme Name:   sevensfarm
 Description:  セブンズファームのWebサイトテーマです。
 Author:       cuerda 内田みくに
*/
 ?>
html{
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
*{
	margin:0;
	padding:0
}
body{
	position:relative;
	font-family:"Kiwi Maru",serif;
	font-weight:800;
	font-style:normal;

	height:100vh;
}
#contents{
	position:relative;
	opacity:1;
	padding:0 0 0 0;
	height:calc(100vh - 52px);
}
.grecaptcha-badge{visibility:hidden;}
.kiwi{
	font-family:"Kiwi Maru",serif;
	font-weight:800;
	font-style:normal;
}
.kiwi span{
	background:#fff;
	color:#000;
	opacity:0.7;
}
.container{
	position:relative;
	margin:0;
	padding:0;
	height:100vh;
}

h1{
	font-size:8vw;
	letter-spacing:0.1em;
	color:#666
}
p{
	font-size:5vw;
	line-height:1.8em;
	font-weight:bold;
	color:#000
}
#catchphrase{
	width:100%;
	text-align:center;
	position:absolute;
	top:40%;
	z-index:10;
}
#catchphrase p{
}
address{
	position:absolute;
	width:100%;
	bottom:10px;
	height:1em;
	margin:0 auto
	z-index:10;
}
address p{
	font-family: "BIZ UDPMincho", serif;
	font-size:0.8em;
	font-style:normal;
	text-align:center;
}
address p span{
	display:block;
	margin:0 1em;
	padding:0 0;
	background:#fff;
}


#berry_right{
	position:absolute;
	top:52px;
	width:100%;
	height:100%;
	background: url(/img/bulueberry_right.png?1) no-repeat;
	background-position:98% 96%;
	z-index:2;
}
#berry_left{
	position:absolute;
	top:52px;
	width:100%;
	height:100%;
	background: url(/img/bulueberry_left.png?1) no-repeat;
	background-position:2% 96%;
	z-index:2;
}
#berry_center{
	position:absolute;
	top:52px;
	width:90%;
	left:5%;
	height:100%;
	background: url(/img/bulueberry_center2.png?1) repeat-x;
	background-position:50% 96%;
	z-index:1;
}

#sun{
	position:absolute;
	top:52px;
	left:5vw;
	width:15vh;
	height:15vh;
	background: url(/img/sun.png) no-repeat;
	opacity:1;
}

#cloud0{
	position:absolute;
	top:52px;
	left:0;
	width:100%;
	height:100%;
	background: url(/img/cloud2.png) no-repeat;
	opacity:1;
}


#cloud{
	position:absolute;
	top:52px;
	left:0;
	width:100%;
	height:100%;
	background: url(/img/cloud.png?1) no-repeat;
	opacity:1;
}

#cloud2{
	position:absolute;
	top:52px;
	left:0;
	width:100%;
	height:100%;
	background: url(/img/cloud2.png) no-repeat;
	opacity:1;
}

#click{
	width:100%;
	text-align:center;
	margin:1.5em 0 0 0;
}
#click a{
	display:block;
	width:150px;
	margin:0 auto;
	background: url(/img/click.png) no-repeat;
	background-size:100%;
	background-position:100%;
	text-decoration:none;

}

#click a span{
	display:block;
	color:#000;
	font-family: "BIZ UDPMincho", serif;
	font-weight:800;
	font-size:60%;

}

#click a:hover span{
	font-size:68%;
}


@media screen and (max-width:220px) {
	.navtext{
		font-size:12px;
		text-indent:24px;
	}
	@keyframes sunAnimation{
		from {
			transform: rotate(0deg); /* 初期状態（0度回転） */
		}
		to {
			transform: rotate(360deg); /* 最終状態（360度回転） */
		}
	}
	#sun{
		animation: sunAnimation 60s infinite;
		width:50px;
		height:50px;
		background-position: 0;
		background-size:100%;
		z-index:3;
	}
	#cloud0{
		background-position: 22% 7%;
		background-size:14vh;
	}
	#cloud{
		background-position: 70% 15%;
		background-size:17vh;
	}
	#cloud2{
		background-position: 92% 2%;
		background-size:12vh;
	}
	#click a{
		width:60px;
	}
	#berry_right,#berry_left{
			background-size:60vw;
	}
	#berry_center{
			background-size:60vw;
	}
}


@media screen and (min-width: 221px) and (max-width: 450px) {
	.navtext{
		font-size:18px;
	}
	@keyframes sunAnimation{
		from {
			transform: rotate(0deg); /* 初期状態（0度回転） */
		}
		to {
			transform: rotate(360deg); /* 最終状態（360度回転） */
		}
	}
	#sun{
		animation: sunAnimation 60s infinite;
		width:100px;
		height:100px;
		background-position: 0;
		background-size:100%;
		z-index:3;
	}
	@keyframes cloud0Animation {
		0%, 100% {
			background-position: 22% 7%;
		}
			50% {
			background-position: 26% 7%;
		}
	}
	#cloud0{
		animation: cloud0Animation 5s infinite;
		background-size:14vh;
	}
	@keyframes cloudAnimation {
		0%, 100% {
			background-position: 72% 15%;
		}
			50% {
			background-position: 68% 15%;
		}
	}
	#cloud{
		animation: cloudAnimation 5s infinite;
		background-size:17vh;
	}
	@keyframes cloud2Animation {
		0%, 100% {
			background-position: 94% 3%;
		}
			5% {
			background-position: 94% 3%;
		}
			50% {
			background-position: 90% 3%;
		}
			70% {
			background-position: 90% 3%;
		}
	}
	#cloud2{
		animation: cloud2Animation 5s infinite;
		background-size:12vh;
	}
	#click a{
		width:120px;
	}
	#berry_right,#berry_left{
			background-size:30vw;
	}
	#berry_center{
			width:68%;
			left:16%;
			background-size:52vw;
			background-position:50% 94%;
	}
	#berry_right{
		background-position:99% 95%;
	}
	#berry_left{
		background-position:1% 95%;
	}

}


@media screen and (min-width: 451px){
	.navtext{
		font-size:28px;
	}
	p{
		font-size:24px;
		color:#333
	}
	@keyframes sunAnimation{
		from {
			transform: rotate(0deg); /* 初期状態（0度回転） */
		}
		to {
			transform: rotate(360deg); /* 最終状態（360度回転） */
		}
	}
	#sun{
		animation: sunAnimation 60s infinite;
		background-position: 0;
		background-size:100%;
		z-index:3;
	}
	@keyframes cloud0Animation {
		0%, 100% {
			background-position: 20% 20%;
		}
			50% {
			background-position: 22% 20%;
		}
	}
	#cloud0{
		animation: cloud0Animation 5s infinite;
		background-size:22vh;
	}
	@keyframes cloudAnimation {
		0%, 100% {
			background-position: 51% 10%;
		}
			20% {
			background-position: 51% 10%;
		}
			40% {
			background-position: 50% 10%;
		}
			50% {
			background-position: 49% 10%;
		}
			75% {
			background-position: 50% 10%;
		}
	}
	#cloud{
		animation: cloudAnimation 5s infinite;
		background-size:30vh;
	}
	@keyframes cloud2Animation {
		0%, 100% {
			background-position: 81% 5%;
		}
			50% {
			background-position: 80% 5%;
		}
	}
	#cloud2{
		animation: cloud2Animation 5s infinite;
		background-size:22vh;
	}
	#berry_right,#berry_left{
			background-size:13vw;
	}
	#berry_center{
			background-size:23vw;
	}

}


@media screen and (min-width: 1300px){
	#sun{
		left:10vw;
	}
	@keyframes cloud0Animation {
		0%, 100% {
			background-position: 30% 20%;
		}
			50% {
			background-position: 32% 20%;
		}
	}
	#cloud0{
		animation: cloud0Animation 5s infinite;
		background-size:22vh;
	}
	@keyframes cloudAnimation {
		0%, 100% {
			background-position: 51% 10%;
		}
			50% {
			background-position: 49% 10%;
		}
	}
	#cloud{
		animation: cloudAnimation 5s infinite;
		background-size:30vh;
	}
	@keyframes cloud2Animation {
		0%, 100% {
			background-position: 72% 5%;
		}
			50% {
			background-position: 73% 5%;
		}
	}
	#cloud2{
		animation: cloud2Animation 5s infinite;
		background-size:22vh;
	}
	#berry_right,#berry_left{
		background-size:12vw;
	}
	#berry_center{
			background-size:22vw;
			background-position:50% 95%;
	}
	#berry_right{
		background-position:90% 95%;
	}
	#berry_left{
		background-position:10% 95%;
	}
	#berry_center{
		width:70%;
		left:15%;
	}


}


@media screen and (min-width: 2520px){
	.container{
	background:#fff;
	width:2520px;
	margin:0 auto;
	}
	.header{
	width:2520px;
	}
	#berry_right,#berry_left{
		background-size:12vw;
	}
	#berry_center{
			background-size:18vw;
			background-position:50% 95%;
	}
	#berry_right{
		background-position:90% 95%;
	}
	#berry_left{
		background-position:10% 95%;
	}

}

/*セブン君*/
#seven{
	position:absolute;
	right:10vw;
	bottom:0;
	width:13vw;
	background: url(/img/seven_big.png) no-repeat;
	z-index:0;
}

@media screen and (min-width: 0px) and (max-width: 250px) {
	#seven{
		display:none;
	}
}
@media screen and (min-width: 251px) and (max-width: 375px) {
	#seven{
		background-size:100%;
		height:31vw;
		background-position:60% 0%;
	}
}
@media screen and (min-width: 376px) and (max-width: 450px) {
	#seven{
		background-size:100%;
		width:22vw;
		height:40vw;
		background-position:50% 10%;
	}
}

@media screen and (min-width: 451px) and (max-width: 700px) {
	#seven{
		background-size:100%;
		height:18vw;
		background-position:83% 0%;
	}
}
@media screen and (min-width: 701px) and (max-width: 1300px) {
	#seven{
		background-size:70%;
		height:16vw;
		background-position:83% 0%;
	}
}
@media screen and (min-width:1301px){
	#seven{
		background-size:80%;
		height:16.5vw;
		background-position:85% 5%;
	}
}