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

body{
}

header .top{

}

header .bottom{

}

main{
	display: block;
	position: relative;
	overflow: hidden;
}

main .inner{
	display: block;
	position: relative;
	background-image: url(../img/top/bg.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	height: 2530px;
	width: 1200px;
	top: -125px;
	margin-bottom: -130px;
}

.bird01{
	display: block;
	position: absolute;
	top: 0!important;
	left: 0;	
	width: 120px;
	height: 100px;
	overflow: hidden;
	background: transparent url(../img/top/bird01.png) no-repeat top left;
	z-index: 100;
	visibility: hidden;
}

.bird02{
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;	
	width: 120px;
	height: 100px;
	overflow: hidden;
	background: transparent url(../img/top/bird02.png) no-repeat top left;
	z-index: 100;
}

.bird01_sp,
.bird02_sp{
	display: none;
}

.partsGroup{
	display: block;
	position: relative;
	height: auto;
	top: 0;
	right: 0;
}

.partsGroup li.parts01{
	position: absolute;
	left: 115px;
	top: 670px;
	width: 155px;
	height: 200px;
}

.partsGroup li.parts02{
	position: absolute;
	left: 40px;
	top: 1030px;
	width: 200px;
	height: 360px;
}

.partsGroup li.parts03{
	position: absolute;
	left: 415px;
	top: 1520px;
	width: 200px;
	height: 100px;
}

.partsGroup li.parts04 {
	position: absolute;
	left: 90px;
	top: 1910px;
	width: 300px;
	height: 150px;
}

.partsGroup li.parts05{
	position: absolute;
	left: 100px;
	top: 2250px;
	width: 200px;
	height: 115px;
}

.partsGroup li.parts06{
	position: absolute;
	right: 0;
	top: 600px;
	width: 370px;
	height: 260px;
}

.partsGroup li.parts07{
	position: absolute;
	right: 60px;
	top: 885px;
	width: 270px;
	height: 260px;
}

.partsGroup li.parts08{
	position: absolute;
	right: 75px;
	top: 1370px;
	width: 200px;
	height: 151px;
}

.partsGroup li.parts09{
	position: absolute;
	right: 75px;
	top: 1910px;
	width: 75px;
	height: 65px;
}

.partsGroup li.parts10{
	position: absolute;
	right: 50px;
	top: 2140px;
	width: 400px;
	height: 325px;
}


main .partsGroup li img{
	width: 100%;
	display: block;
}
	
.catch{
	position: absolute;
	width: 560px;
	right: 0;
	font-family: "Sawarabi Gothic";
	top: 200px;
}

.catch h2{
	font-size: 36px;
	font-weight: bold;
	line-height: 1.8em;
	margin-bottom: 35px;
}

.catch .text{
	font-size: 19px;
	font-weight: bold;
	line-height: 1.7em;
}

.catch .text span{
	font-weight: bold;
}

.spotGroup{
	display: block;
	height: 100%;
}

.spotGroup li{
	position: absolute;
	width:250px;
}

.spotGroup li a{
	display: block;
}

.spotGroup li h3{
	position: absolute;
	pointer-events: none;
	cursor: default;
	opacity: 0;
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	-ms-transition: all 500ms;
	-o-transition: all 500ms;
	transition: all 500ms;
	transition-delay:700ms;
}

.spotGroup li h3 .text{
	display: none;
}

.spotGroup li.niimi{
	left: 300px;
	top: 530px;
}

.spotGroup li{
	-webkit-transition: all 600ms cubic-bezier(.01,.61,.3,1.2);
	-moz-transition: all 600ms cubic-bezier(.01,.61,.3,1.2);
	-ms-transition: all 600ms cubic-bezier(.01,.61,.3,1.2);
	-o-transition: all 600ms cubic-bezier(.01,.61,.3,1.2);
	transition: all 600ms cubic-bezier(.01,.61,.3,1.2);
	opacity: 0;
}

.spotGroup li.active{
	opacity: 1.0;
	transform: translateY(50px);
}

.spotGroup li.active h3{
	opacity: 1.0;
	transform: translateY(10px);
}


.spotGroup li.niimi h3{
	position: absolute;
	width: 200px;
	left: 250px;
	top: 30px;
}

.spotGroup li.takahashi{
	right: 350px;
	top: 770px;
}

.spotGroup li.takahashi h3{
	position: absolute;
	width: 200px;
	left: 230px;
	top: -30px;
}

.spotGroup li.ibara{
	left: 215px;
	top: 950px;
}

.spotGroup li.ibara h3{
	position: absolute;
	width: 150px;
	left: -120px;
	top: -50px;
}

.spotGroup li.soja{
	right: 210px;
	top: 1120px;
}

.spotGroup li.soja h3{
	position: absolute;
	width: 160px;
	left: 220px;
	top: -50px;
}

.spotGroup li.yakage{
	left: 430px;
	top: 1230px;
}

.spotGroup li.yakage h3{
	position: absolute;
	width: 170px;
	left: -150px;
	top: 150px;
}

.spotGroup li.kasaoka{
	left: 160px;
	top: 1560px;
}

.spotGroup li.kasaoka h3{
	position: absolute;
	width: 160px;
	top: -75px;
	left: -100px;
}

.spotGroup li.asakuchi{
	left: 500px;
	top: 1660px;
}

.spotGroup li.asakuchi h3{
	position: absolute;
	width: 160px;
	left: -100px;
	top: 200px;
}

.spotGroup li.hayashima{
	right: 130px;
	top: 1590px;
}

.spotGroup li.hayashima h3{
	position: absolute;
	width: 105px;
	left: 220px;
	top: -50px;
}

.spotGroup li.kurashiki{
	right: 250px;
	top: 2030px;
}

.spotGroup li.kurashiki h3{
	position: absolute;
	width: 150px;
	left: 220px;
	top: -50px;
}

.spotGroup li img{
	width:100%;
}

/*画面サイズが1400px以下の場合*/
@media screen and (max-width: 1400px) {
	header .inner{
		width: auto;
	}
}

/*画面サイズが1200px以下の場合*/
@media screen and (max-width: 1200px) {	
	.inner{
		width:auto;
	}
	
	main .inner{
		width: auto;
	}
	
	header h1 img{
		width: 100%;
	}

	.partsGroup li.parts01 {
		left: 0px;
	}
	
	.partsGroup li.parts02 {
		left: 0;
	}
	
	.partsGroup li.parts03 {
		left: 200px;
	}
	
	.partsGroup li.parts04 {
		left: 0px;
	}
	
	.partsGroup li.parts05 {
		left: 0px;
	}
	
	.partsGroup li.parts08 {
		right:0;
	}
	
	.spotGroup li.niimi {
		left: 200px;
		top: 600px;
	}

	.spotGroup li.takahashi {
		right: 250px;
		top: 770px;
	}

	.spotGroup li.ibara {
		left: 250px;
		top: 950px;
	}

	.spotGroup li.soja {
		right: 200px;
		top: 1120px;
	}

	.spotGroup li.yakage {
		left: 350px;
		top: 1230px;
	}

	.spotGroup li.kasaoka{
		left: 110px;
		top: 1560px;
	}

	.spotGroup li.asakuchi {
		left: 400px;
		top: 1660px;
	}

	.spotGroup li.hayashima{
		right: 90px;
		top: 1590px;
	}

	.spotGroup li.kurashiki{
		right: 200px;
		top: 2030px;
	}	
}

/*画面サイズが1100px以下の場合*/
@media screen and (max-width: 1100px) {
	header .inner {
		width: auto;
	}
	
	main .inner{
		width: 1000px;
		padding:0 20px;
	}
	
	.partsGroup li.parts09{
		right: 0;
	}
	
	.partsGroup li.parts10 {
		right: -50px;
	}
	
	.spotGroup li {
		width: 200px;
	}
	
	.spotGroup li h3{
		background-color: rgba(255,255,255,0.7);
	}
	
	.spotGroup li h3 img{
		display: none;
	}
	
	.spotGroup li h3 .text{
		display: block;
		font-size: 12px;
		text-align: left;
		color: #000;
		line-height: 1.8em;
		font-weight: bold;
		text-align: center;
	}
	
	.spotGroup li h3 {
		position: relative !important;
		width: auto !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
	}
}

@media screen and (max-width: 980px) {
	main .inner{
		width: auto;
	}
	
	.inner {
		width: auto;
		padding: 0 20px;
	}
	
	.spotGroup li h3 {
		display: block;
		width: 60% !important;
		margin: auto;
	}
	
	.spotGroup li.niimi {
		left: 100px;
		top: 600px;
	}

	.spotGroup li.takahashi {
		right: 0px;
		top: 700px;
	}

	.spotGroup li.ibara {
		left: 250px;
		top: 950px;
	}

	.spotGroup li.soja {
		right: 50px;
		top: 1000px;
	}

	.spotGroup li.yakage {
		left: 250px;
		top: 1230px;
	}

	.spotGroup li.kasaoka{
		left: 110px;
		top: 1560px;
	}

	.spotGroup li.asakuchi {
		left: 300px;
		top: 1660px;
	}

	.spotGroup li.hayashima{
		right: 0;
		top: 1490px;
	}

	.spotGroup li.kurashiki{
		right: 0;
		top: 2030px;
	}
	
	
}

/*画面サイズが850px以下の場合*/
@media screen and (max-width: 850px) {
	.catch h2 {
		font-size: 30px;
		font-weight: bold;
		line-height: 1.5em;
		margin-bottom: 20px;
	}

	.catch .text {
		font-size: 16px;
		font-weight: bold;
		line-height: 1.7em;
	}
	
	.spotGroup li {
		width: 200px;
	}
	
	.catch{
		width: 60%;
		top: 250px;
	}
	
	.catch h2 {
		font-size: 25px;
		margin-bottom: 15px;
	}
	
	.partsGroup li.parts01{
		position: absolute;
		width: 100px;
		left: 0px;
		top: 750px;
	}

	.partsGroup li.parts02{
		position: absolute;
		left: 0px;
		top: 1000px;
		width: 200px;
	}

	.partsGroup li.parts03{
		position: absolute;
		left: 0;
		top: 1450px;
		width: 200px;
	}

	.partsGroup li.parts04 {
		position: absolute;
		left: 20px;
		top: 2000px;
		width: 300px;
	}

	.partsGroup li.parts05{
		position: absolute;
		left: 10px;
		top: 2250px;
	}

	.partsGroup li.parts06{
		position: absolute;
		right: 0;
		top: 500px;
	}

	.partsGroup li.parts07{
		position: absolute;
		right: 0;
		top: 930px;
		width: 200px;
	}

	.partsGroup li.parts08{
		right: 0;
		top: 1370px;
		width: 150px;
	}

	.partsGroup li.parts09{
		position: absolute;
		right: 0;
		top: 1700px;
		width: 70px;
	}

	.partsGroup li.parts10{
		position: absolute;
		right: 0px;
		top: 2250px;
		width: 250px;
	}

	.spotGroup li.niimi {
		left: 100px;
		top: 600px;
	}

	.spotGroup li.takahashi {
		right: 0px;
		top: 600px;
	}

	.spotGroup li.ibara {
		left: 250px;
		top: 950px;
	}

	.spotGroup li.soja {
		right: 0px;
		top: 1000px;
	}

	.spotGroup li.yakage {
		left: 250px;
		top: 1230px;
	}

	.spotGroup li.kasaoka{
		left: 110px;
		top: 1560px;
	}

	.spotGroup li.asakuchi {
		left: 300px;
		top: 1660px;
	}

	.spotGroup li.hayashima{
		right: 0;
		top: 1490px;
	}

	.spotGroup li.kurashiki{
		right: 100px;
		top: 2030px;
	}

	
}

/*画面サイズが800px以下の場合*/
@media screen and (max-width: 800px) {

}

/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {
	.bird01,
	.bird02{
		display: none;
	}
	
	.bird01_sp{
		display: block;
		position: absolute;
		top: 0!important;
		right: 0;	
		width: 80px;
		height: 70px;
		overflow: hidden;
		background: transparent url(../img/top/bird01_sp.png) no-repeat top left;
		z-index: 100;
		visibility: hidden;
	}

	.bird02_sp{
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;	
		width: 80px;
		height: 70px;
		overflow: hidden;
		background: transparent url(../img/top/bird02_sp.png) no-repeat top left;
		z-index: 100;
	}
	
	
	.catch {
		position: relative;
		width: auto;
		right: auto;
		top: 50px;
	}
	
	.catch h2 {
		font-size: 25px;
		line-height: 1.5em;
		margin-bottom: 15px;
		text-align: center;
	}
	
	main .inner{
		background-image: url(../img/top/bg_sp.png);
	}
	
	
	main .inner {
		top: 0;
		margin-bottom: 0;
	}
	
	.spotGroup li h3 {
		width: 100% !important;
	}
	
	.partsGroup li.parts01{
		top: 650px;
	}
	
	.partsGroup li.parts03{
		left: -100px;
		top: 400px;
	}
	
	.partsGroup li.parts06 {
		top: 280px;
		right: -150px;
	}
	
	.partsGroup li.parts07 {
		right: -100px;
		top: 480px;
	}
	
	.partsGroup li.parts08 {
		right: -50px;
		top: 1270px;
	}
	
	.partsGroup li.parts09 {
		right: -50px;
		top: 850px;
	}
	
	.partsGroup li.parts10 {
		right: -100px;
		top: 2250px;
	}
	
	.spotGroup li.niimi {
		left: 0%;
		top: 400px;
	}
	
	.spotGroup li.takahashi {
		right: 100px;
		top: 500px;
	}

	.spotGroup li.ibara {
		left: 10%;
		top: 800px;
	}
	
	.spotGroup li.soja {
		right: 0%;
		top: 920px;
	}
	
	.spotGroup li.yakage {
		left: 10%;
		top: 1130px;
	}
	
	.spotGroup li.kasaoka {
		left: 0;
		top: 1450px;
	}
	
	.spotGroup li.asakuchi {
		left: 25%;
		top: 1660px;
	}
	
	.spotGroup li.hayashima {
		right: 0;
		top: 1450px;
	}
	
	.spotGroup li.kurashiki {
		right: 0%;
		top: 2030px;
	}
}

/*画面サイズが600px以下の場合*/
@media screen and (max-width: 600px) {
	
	header .top .btnGroup li {
		width: 50%;
		margin-right: 0;
	}
	
	header .top .btnGroup li:last-child {
		width: 40%;
	}
	
	main .inner {
		background-size: cover;
		height: 1500px;
		top: auto;
		margin-bottom: 0;
		padding-top: 300px;
		overflow: hidden;
	}

	.catch {
		position: relative;
		width: auto;
		right: auto;
		top: -280px;
	}
	
	.catch h2 {
		font-size: 24px;
	}
	
	.spotGroup li {
		width: 150px;
	}
	
	.partsGroup li.parts02 {
		left: -50px;
		top: 1000px;
	}
	
	.partsGroup li.parts06 {
		top: 0px;
	}
	
	.partsGroup li.parts07 {
		top: 200px;
	}
	
	.partsGroup li.parts08 {
		top: 1350px;
	}
	
	.spotGroup li.ibara {
		left: 0;
		top: 700px;
	}
	
	.spotGroup li.takahashi {
		right: 0;
		top: 300px;
	}
	
	.spotGroup li.soja {
		right: 0;
		top: 580px;
	}
	
	.spotGroup li.yakage {
		left: 50px;
		top: 950px;
	}
	
	.spotGroup li.hayashima {
		right: 0;
		top: 850px;
	}
	
	.spotGroup li.asakuchi {
		left: 30%;
		top: 1200px;
	}
	
	.spotGroup li.kurashiki {
		right: 0;
		top: 1450px;
	}
	
	
	
}

/*画面サイズが560px以下の場合*/
@media screen and (max-width: 560px) {

}

/*画面サイズが480px以下の場合*/
@media screen and (max-width: 480px) {

}

/*画面サイズが400px以下の場合*/
@media screen and (max-width: 400px) {

}