@charset "utf-8";
/* CSS Document */
h1,h2,h3,ul,li,p,th,td{
	font-family: "HG明朝E","メイリオ","游明朝体";
	color: #000;
}
header {
	width: 100%;
	height: 40px;
	border-bottom: 4px solid #FFCD68;
}
header img {
	height: auto;
	margin: 7px 0 0 5px;
}
header .mail {
	float: right;
	margin-top: 4px;
	margin-right: 20px;
}
#index h2 {
	font-size: 40px;
}
#index h3 {
	font-size: 26px;
}
#index p {
	font-size: 20px;
}
#index #main {
		height: 100vh;
}
#index #main::before {
    animation-duration: 6000ms;
}
#index #main .box01 {
	width: 920px;
	height: 400px;
	position: absolute;
	top: -100px;
	left: -20px;
	background-color: rgba(255,255,255,0.4);
	transform: rotate(10deg);
    animation-duration: 1600ms;
    animation-name: slidein01;
}
#index #main .box02 {
	width: 3400px;
	height: 1700px;
	position: absolute;
	top: 730px;
	left: 220px;
	background-color: rgba(255,255,255,0.4);
	transform: rotate(14deg);
    animation-duration: 1600ms;
    animation-name: slidein02;
}
#index #main .box03 {
	width: 100vw;
	height: 50vh;
	position: absolute;
	top: -50vh;
	left: 0px;
	background-color: rgba(25,25,25,0.3);
    animation-duration: 1600ms;
    animation-name: slidein03;
}
#index #main .box04 {
	width: 100vw;
	height: 50vh;
	position: absolute;
	top: 100vh;
	left: 0px;
	background-color: rgba(25,25,25,0.3);
    animation-duration: 1600ms;
    animation-name: slidein04;
}
#index .mainLogo img {
	width: 100%;
	height: 100%;
	display: block;
 	transition: 2s;
	transition-timing-function: ease-out;
}
#index #main p.x01 {
	font-size: 40px;
	position: absolute;
	top: 500px;
	left: 225px;
	color: #F29600;text-shadow: 1px 1px 1px #333;
	transform: rotate(-76deg);
    animation-duration: 2400ms;
    animation-name: slidein00;
}
#index #main div.beeSlide {
	position: absolute;
	bottom: 5vh;
	right: 450px;
    animation-duration: 5000ms;
    animation-name: beeSlide;
	transition-timing-function: ease-out;
}
#index #main div.beeAnime {
	position: absolute;
	animation: vertical 1s ease-in-out infinite alternate;
}
#index #main .beeAnime img.bee {
	width: 440px;
	position: relative;
	bottom: 410px;
 	transition: 2s;
	transition-timing-function: ease-out;
	animation: horizontal 1s ease-in-out infinite alternate;
}

/*---------- main end ----------*/

#index .wrap {
	width: 1250px;
	height: auto;
	margin: 0 auto;
	padding: 100px 0 50px 0;
}
#index .wrap .text {
	margin-left: 2em;
}

#index .wrap .text span {
	display: inline;
}
/*---------- about start ----------*/

#index .aboutContent .wrap {
	margin-top: -1100px;
}
#index .aboutContent .circle01 {
	width: 350px;
	height: 350px;
	border-radius: 50%;
	position: relative;
	top: -160px;
	left: -140px;
}
#index .aboutContent .circle02 {
	width: 500px;
	height: 500px;
	border-radius: 50%;
	position: relative;
	bottom: -20px;
	right: -80vw;
}
#index .aboutContent .bubble01 {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: relative;
	top: -220px;
	left: 80vw;
}
#index .aboutContent .bubble02 {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	position: relative;
	top: -295px;
	left: 25vw;
}
#index .aboutContent .bubble03 {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: relative;
	top: -360px;
	left: 70vw;
}
#index .aboutContent .bubble04 {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	position: relative;
	top: -410px;
	left: 40vw;
}
#index .aboutContent .bubble05 {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: relative;
	top: -445px;
	left: 60vw;
}

#index .aboutContent .text {
	padding: 80px 0;
}

#index .aboutContent p ,
#index .businessContent p {
	margin-bottom: .8em;
}


/*---------- about end ----------*/


/*---------- business start ----------*/

#index .businessContent .h2 p {
	text-indent: 0em;
	color: white;
}
#index .businessContent div.x01 ,
#index .businessContent div.x02 ,
#index .businessContent div.x03 ,
#index .businessContent div.x04 ,
#index .businessContent div.x05 {
	width: auto;
}
#index .businessContent .text p {
	text-indent: 0em;
}
#index .businessContent .text {
	width: 49em;
	margin-top: .8em;
}
#index .businessContent img {
	width: 400px;
	height: 250px;
	transform: rotateY(-50deg) rotateX(5deg);
	transition: transform .5s linear;
	position: absolute;
	right: 30px;
	top: 70px;
}
#index .businessContent img:hover {
	transform: rotateY(-35deg) rotateX(-0deg) translate(15px,0);
}

/*---------- business end ----------*/


#footer p {
	font-size:12px;
	margin:0 auto;
	text-align: center;
	color: white;
}

@keyframes blur {
    from { filter: blur(20px); }
    50% { filter: blur(20px); }
    to { filter: blur(1px); }
}
@keyframes slidein01 {
    from { top: -470px; left: -870px; }
    50% { top: -470px; left: -870px; }
    to { top: -100px; left: -20px; }
}
@keyframes slidein02 {
    from { top: 100vh; left: 100vw; }
    50% { top: 100vh; left: 100vw; }
    to { top: 730px; left: 230px; }
}
@keyframes slidein00 {
    from { top: 1700px; left: -100px; }
    50% { top: 1700px; left: -100px; }
    75% { top: 1390px; left: 0px; }
    to { top: 500px; left: 225px; }
}
@keyframes slidein03 {
    from { top: -50vh; left: 0px; }
    50% { top: 0px; left: 0px; }
    to { top: 0vh; left: 100vw; }
}
@keyframes slidein04 {
    from { top: 100vh; left: 0px; }
    50% { top: 50vh; left: 0px; }
    to { top: 50vh; left: -100vw; }
}
@keyframes beeSlide {
    from { bottom: 600px; right: 0px; }
    50% { bottom: 600px; right: 0px; }
    to { bottom: 5vh; right: 450px; }
}

@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}