@charset "utf-8";

@keyframes swing {
	25% {
		-webkit-transform: rotate3d(0, 0, 1, 3deg);
		transform: rotate3d(0, 0, 1, 3deg);
	}
	50% {
		-webkit-transform: rotate3d(0, 0, 1, -3deg);
		transform: rotate3d(0, 0, 1, -3deg);
	}
	75% {
		-webkit-transform: rotate3d(0, 0, 1, 3deg);
		transform: rotate3d(0, 0, 1, 3deg);
	}
	to {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
		transform: rotate3d(0, 0, 1, 0deg);
	}
}
@-webkit-keyframes swing {
	25% {
		-webkit-transform: rotate3d(0, 0, 1, 3deg);
		transform: rotate3d(0, 0, 1, 3deg);
	}
	50% {
		-webkit-transform: rotate3d(0, 0, 1, -3deg);
		transform: rotate3d(0, 0, 1, -3deg);
	}
	75% {
		-webkit-transform: rotate3d(0, 0, 1, 3deg);
		transform: rotate3d(0, 0, 1, 3deg);
	}
	to {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
		transform: rotate3d(0, 0, 1, 0deg);
	}
}
@-webkit-keyframes move {
	6.25% {
		-webkit-transform: translate(-10px,-10px);
		transform: translate(-10px,-10px);
	}
	12.5% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	18.75% {
		-webkit-transform: translate(10px,-10px);
		transform: translate(10px,-10px);
	}
	25% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	to {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
}
@keyframes move {
	6.25% {
		-webkit-transform: translate(-10px,-10px);
		transform: translate(-10px,-10px);
	}
	12.5% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	18.75% {
		-webkit-transform: translate(10px,-10px);
		transform: translate(10px,-10px);
	}
	25% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	to {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
}
@-webkit-keyframes move02 {
	25% {
		-webkit-transform: translate(-10px,10px) rotate(-5deg);
		transform: translate(-10px,,10px) rotate(-5deg);
	}
	50% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	75% {
		-webkit-transform: translate(-10px,10px) rotate(-5deg);
		transform: translate(-10px,,10px) rotate(-5deg);
	}
	to {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
}
@keyframes move02 {
	25% {
		-webkit-transform: translate(-10px,10px) rotate(-5deg);
		transform: translate(-10px,,10px) rotate(-5deg);
	}
	50% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	75% {
		-webkit-transform: translate(-10px,10px) rotate(-5deg);
		transform: translate(-10px,,10px) rotate(-5deg);
	}
	to {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
}
@-webkit-keyframes jump {
	4% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	20% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	21% {
		-webkit-transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
		transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
	}
	22% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
		transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
	}
	23% {
		-webkit-transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
		transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
	}
	24% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
		transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
	}
	25% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	40% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	46% {
		-webkit-transform:translate(0,-28px) scale(1.05,1.05);
		transform:translate(0,-28px) scale(1.05,1.05);
	}
	50% {
		-webkit-transform:translate(0,1px) scale(0.99,0.99);
		transform:translate(0,1px) scale(0.99,0.99);
	}
	52% {
		-webkit-transform:translate(0,0) scale(1,1);
		transform:translate(0,0) scale(1,1);
	}
	to {
		-webkit-transform:translate(0,0) scale(1,1);
		transform:translate(0,0) scale(1,1);
	}
}
@keyframes jump {
	4% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	20% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	21% {
		-webkit-transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
		transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
	}
	22% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
		transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
	}
	23% {
		-webkit-transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
		transform:translate(0,12px) scale(0.9,0.85) rotateZ(1deg);
	}
	24% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
		transform:translate(0,10px) scale(0.9,0.85) rotateZ(0deg);
	}
	25% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	40% {
		-webkit-transform:translate(0,10px) scale(0.9,0.85);
		transform:translate(0,10px) scale(0.9,0.85);
	}
	46% {
		-webkit-transform:translate(0,-28px) scale(1.05,1.05);
		transform:translate(0,-28px) scale(1.05,1.05);
	}
	50% {
		-webkit-transform:translate(0,1px) scale(0.99,0.99);
		transform:translate(0,1px) scale(0.99,0.99);
	}
	52% {
		-webkit-transform:translate(0,0) scale(1,1);
		transform:translate(0,0) scale(1,1);
	}
	to {
		-webkit-transform:translate(0,0) scale(1,1);
		transform:translate(0,0) scale(1,1);
	}
}
.swing {
	-webkit-transform-origin: center center;
	-webkit-animation-name: swing;
	-webkit-animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	transform-origin: center center;
	animation-name: swing;
	animation-duration: 5s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
.move {
	-webkit-animation-name: move;
	-webkit-animation-duration: 4s;
	-webkit-animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 0.5s;
	animation-name: move;
	animation-duration: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-delay: 0.5s;
}
.move02 {
	-webkit-animation-name: move02;
	-webkit-animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 1s;
	animation-name: move02;
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-delay: 1s;
}
.jump {
	-webkit-transform-origin: top center;
	-webkit-animation-name: jump;
	-webkit-animation-duration: 6s;
	-webkit-animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	transform-origin: top center;
	animation-name: jump;
	animation-duration: 6s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}


/**************************************************
		PC
**************************************************/
@media print, screen and (min-width:768px){

body {
	position:relative;
	background:#FFEA59 url("../common/img/bg03.png") 0 50% no-repeat;
	background-size:1440px auto;
}

#headerWrapper {
	position:fixed;
	width:100%;
	right:50%;
	transform:translateX(50%);
	z-index:200;
}
#wrapper {
	position:absolute;
	width:100%;
	max-width:1920px;
	min-width:1440px;
	max-height:1080px;
}
#wrapper.fixed {
	right:50%;
	bottom:50%;
	transform:translate(50%,50%);
}
#wrapper.fixedW {
	right:0;
	bottom:50%;
	transform:translate(0,50%);
}
#wrapper.fixedH {
	right:50%;
	bottom:0;
	transform:translate(50%,0);
}

#bg01 {
	position:relative;
	top:0;
	left:0;
	width:auto;
	height:auto;
	background:none;
}
#bg01 img {
	width:100%;
}


#headerArea {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}
#headerArea .logo {
	position:absolute;
	top:40px;
	right:40px;
	width:138px;
	max-width:181px;
}
#headerArea .logo img {
	width:100%;
}
#headerArea #btnMenu {
	position:absolute;
	top:40px;
	left:40px;
	width:80px;
	max-width:107px;
}
#headerArea #btnMenu img {
	width:100%;
}


#mainArea {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:5;
}
#mainArea .listMenu li {
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
#mainArea .listMenu li a {
	position:relative;
	display:block;
}
#mainArea .listMenu li a span {
	position:absolute;
	bottom:115%;
	left:50%;
	transform:translateX(-50%);
	display:none;
	padding:20px;
	white-space:nowrap;
	background-color:#fff;
	border:3px solid #595757;
	border-radius:10px;
	font-size:1rem;
	font-weight:900;
	line-height:1;
	box-shadow:0px 6px 17px -6px rgba(0,0,0,0.5);
}
#mainArea .listMenu li a span:before {
	content:"";
	position:absolute;
	bottom:-18px;
	left:50%;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-style: solid;
	border-width: 18px 10px 0 10px;
	border-color: #595757 transparent transparent transparent;
}
#mainArea .listMenu li a span:after {
	content:"";
	position:absolute;
	bottom:-12px;
	left:50%;
	transform:translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 10px 0 10px;
	border-color: #fff transparent transparent transparent;
}
#mainArea .listMenu li img {
	width:100%;
}
#mainArea .listMenu #btnAbout {
	top:40%;
	left:32.501%;
	width:4.167%;
}
#mainArea .listMenu #btnWorks {
	top:58.149%;
	left:59.375%;
	width:3.542%;
}
#mainArea .listMenu #btnNews {
	top:66.914%;
	left:7.355%;
	width:3.195%;
}
#mainArea .listMenu #btnContact {
	top:80%;
	left:87.084%;
	width:4.237%;
}


}

@media print, screen and (min-width:1440px){
body {
	background:#FFEA59 url("../common/img/bg03.png") 50% 50% no-repeat;
	background-size:100% auto;
	
}
#headerArea .logo {
	top:40px;
	right:40px;
	width:9.448%;
	padding-top:0;
}
#headerArea #btnMenu {
	top:40px;
	left:40px;
	width:5.556%;
	padding-top:0;
}

}
@media print, screen and (min-width:1920px){
body {
	background:#FFEA59 url("../common/img/bg02.png") 50% 50% no-repeat;
}
}
@media print, screen and (min-width:1920px)and (max-height: 1080px){
body {
	background:#FFEA59 url("../common/img/bg04.png") 50% 0 no-repeat;
}
}


/**************************************************
		SP
**************************************************/
@media screen and (max-width:767px){

.pc {
	display:none;
}

img {
	width:100%;
}

body {
	position:relative;
	background-color:#FFEA59;
}

#mainArea {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:5;
	background:none;
}
#mainArea .listMenu li {
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
#mainArea .listMenu li img {
	width:100%;
}
#mainArea .listMenu #btnAbout {
	top:59.947vw;
	left:27.176%;
	width:20.784%;
}
#mainArea .listMenu #btnWorks {
	top:47.96vw;
	left:60.48%;
	width:18.12%;
}
#mainArea .listMenu #btnNews {
	top:102.576vw;
	left:39.965%;
	width:16.253%;
}
#mainArea .listMenu #btnContact {
	top:148.935vw;
	left:59.15%;
	width:21.315%;
}
#mainArea .listMenu li a {
	position:relative;
	display:block;
}
#mainArea .listMenu li a span {
	position:absolute;
	bottom:115%;
	left:50%;
	transform:translateX(-50%);
	display:none;
	padding:20px;
	white-space:nowrap;
	background-color:#fff;
	border:3px solid #595757;
	border-radius:10px;
	font-size:1rem;
	font-weight:900;
	line-height:1;
	box-shadow:0px 6px 17px -6px rgba(0,0,0,0.5);
}
#mainArea .listMenu li a span:before {
	content:"";
	position:absolute;
	bottom:-18px;
	left:50%;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-style: solid;
	border-width: 18px 10px 0 10px;
	border-color: #595757 transparent transparent transparent;
}
#mainArea .listMenu li a span:after {
	content:"";
	position:absolute;
	bottom:-12px;
	left:50%;
	transform:translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 10px 0 10px;
	border-color: #fff transparent transparent transparent;
}

}