@charset "utf-8";
/* CSS Document */
html {
	font-size: 100%;
}
body {
	width: 100%;
	-webkit-text-size-adjust: 100%;
}
h1,h2,h3,ul,li,p,th,td{
	color: #000;
}
#wrapper {
	position: relative;
	left: auto;
	right: auto;
}
header {
	width: 100%;
	height: 60px;
	border-bottom: 4px solid #FFCD68;
}
header img {
	height: 37px;
	margin: 14px 0 0 5px;
}
header .mail {
	float: right;
	margin-top: 0px;
	margin-right: 5px;
}
section {
	margin: 0 auto;
}

#index h2 {
	position: relative;
	font-size: 33px;
	font-family: "游明朝体" , "メイリオ";
	padding: .5em 0 .5em .3em;
}
#index h2::after {
	position: absolute;
	top: .4em;
	left: .0em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #F29600;
	border-radius: 3px;
}
#index h3 {
	width: 340px;
	font-size: 26px;
	font-family: "メイリオ" , Meiryo, "游明朝体";
	padding: 1.7em 0 0.5em 0;
	margin-left: .4em;
}
#index h3::after {
	content: "";
    display: block;
	margin-top: .2em;
    height: 3px;
	background: -webkit-linear-gradient(left, #FFA500, rgba(255,165,0,0));
	background: -o-linear-gradient(left, #FFA500, rgba(255,165,0,0));
	background: linear-gradient(to right, #FFA500, rgba(255,165,0,0));
}
#index h3:first-letter {
	font-size: 120%;
	color: red;
}
#index p {
	font-size: 19.5px;
	line-height: 1.7em;
	font-family: Meiryo, "メイリオ" , "游明朝体";
}

/*---------- main start ----------*/

#index #main {
	width: auto;
	height: 80vw;
	position: relative;
	background-image: url(../img/index/indexMain.jpg);
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	z-index: 0;
}

#index #main::before {
	content: '';
	position: absolute;
	top: -0px;
	bottom: -0px;
	left: -0px;
	right: -0px;
	background: inherit;
	filter: blur(1px);
	/* position:absoluteのせいで最前面に来てしまうため */
	z-index: -1;
    animation-duration: 3000ms;
    animation-name: blur;
}
#index #main .box01 {
	width: 520px;
	height: 270px;
	position: absolute;
	top: -120px;
	left: -20px;
	background-color: rgba(255,255,255,0.4);
	transform: rotate(10deg);
    animation-duration: 600ms;
    animation-name: slidein01;
}
#index #main .box02 {
	width: 1200px;
	height: 700px;
	position: absolute;
	top: 320px;
	left: 90px;
	background-color: rgba(255,255,255,0.4);
	transform: rotate(14deg);
    animation-duration: 800ms;
    animation-name: slidein02;
}
#index .mainLogo {
	position: absolute;
	top:20px;
	left: 20px;
	width: 262px;
	height: 154px;
}
#index .mainLogo img {
	width: 70%;
	height: 70%;
	display: block;
 	transition: 2s;
	transition-timing-function: ease-out;
}
#index .mainLogo img:hover {
 	-moz-transform: rotateY(360deg);
 	-webkit-transform: rotateY(360deg);
 	-o-transform: rotateY(360deg);
 	-ms-transform: rotateY(360deg);
	opacity: 0.2;
}
#index #main p.x01 {
	font-size: 34px;
	position: absolute;
	top: 300px;
	left: -10px;
	color: #F29600;text-shadow: 1px 1px 1px #333;
	transform: rotate(-76deg);
    animation-duration: 800ms;
    animation-name: slidein00;
}

#index #main div.beeSlide {
	position: absolute;
	bottom: 2vw;
	right: 270px;
    animation-duration: 2000ms;
    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: 264px;
	position: relative;
	bottom: 246px;
 	transition: 2s;
	animation: horizontal 1s ease-in-out infinite alternate;
}

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

#index .wrap {
	width: 730px;
	margin: 0 auto;
	padding: 20px 0 30px 0;
}
#index .wrap .text {
	margin-left: .7em;
	text-align: justify;
}
#index .wrap .text span.x01 {
	display: none;
}
#index .wrap .text span.x02 {
	color: aquamarine;
}
#index .wrap .text span.x03 {
	color: yellow;
}

/*---------- about start ----------*/

#index .aboutContent {
	overflow: hidden;
}
#index .aboutContent .wrap {
	margin-top: -980px;
}
#index .aboutContent .circle01 {
	width: 280px;
	height: 360px;
	border-radius: 50%;
	position: relative;
	top: -160px;
	left: -140px;
	background-color: rgba(168,255,242,1.00);
	background-image: linear-gradient(120deg, #8fd3f4 0%, #84fab0 100%);
	z-index: -1;
}
#index .aboutContent .circle02 {
	width: 400px;
	height: 400px;
	border-radius: 50%;
	position: relative;
	bottom: 50px;
	right: -75vw;
	background-color: rgba(168,255,242,1.00);
	background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
	z-index: -1;
}
#index .aboutContent .bubble01 {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: relative;
	top: -220px;
	left: 80vw;
	background-color: rgba(117,215,240,0.20);
    animation-duration: 8s;
    animation-name: bubbleFloating01;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-delay: 1s;
	z-index: -2;
}
#index .aboutContent .bubble02 {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	position: relative;
	top: -295px;
	left: 25vw;
	background-color: rgba(117,215,240,0.20);
    animation-duration: 9.2s;
    animation-name: bubbleFloating02;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-delay: 3s;
}
#index .aboutContent .bubble03 {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: relative;
	top: -360px;
	left: 70vw;
	background-color: rgba(117,215,240,0.20);
    animation-duration: 10.4s;
    animation-name: bubbleFloating03;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-delay: 4s;
}
#index .aboutContent .bubble04 {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	position: relative;
	top: -410px;
	left: 40vw;
	background-color: rgba(117,215,240,0.20);
    animation-duration: 11.6s;
    animation-name: bubbleFloating04;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-delay: 2s;
}
#index .aboutContent .bubble05 {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: relative;
	top: -445px;
	left: 60vw;
	background-color: rgba(117,215,240,0.20);
    animation-duration: 12.8s;
    animation-name: bubbleFloating05;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-delay: 5s;
}

#index .aboutContent p {
	margin-bottom: .8em;
}
#index .aboutContent a:link { color: #00A585; }
#index .aboutContent a:visited { color: #00A585; }
#index .aboutContent a:hover { color: #06CCA6; }
#index .aboutContent a:active { color: #00A585; }

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


/*---------- business start ----------*/
#index .businessContent .text p {
	text-indent: 1em;
}
#index .businessContent .h2 p {
	text-indent: 0em;
}
#index .businessContent {
	background-color: azure;
	position: relative;
	background-image: url(../img/index/businessBgB.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
#index .businessContent div.x01 ,
#index .businessContent div.x02 ,
#index .businessContent div.x03 ,
#index .businessContent div.x04 ,
#index .businessContent div.x05 {
	height: 370px;
	width: 44em;
	margin: 50px 0 40px .8em;
	perspective: 2000px;
	background-color: rgba(255,255,255,0.65);
	box-shadow: 0 0 2px;
}
#index .businessContent div.x03 ,
#index .businessContent div.x05 {
	height: 340px;
}
#index .businessContent div.x01 ,
#index .businessContent div.x03 ,
#index .businessContent div.x05 {
	transform: rotateZ(-1deg); 
}
#index .businessContent div.x01 .deg ,
#index .businessContent div.x03 .deg ,
#index .businessContent div.x05 .deg {
	transform: rotateZ(1deg);
}
#index .businessContent div.x02 ,
#index .businessContent div.x04 {
	transform: rotateZ(1deg);
}
#index .businessContent div.x02 .deg ,
#index .businessContent div.x04 .deg {
	transform: rotateZ(-1deg);
}
#index .businessContent .text {
	width: 42em;
	margin-top: .8em;
	text-align: justify;
}

#index .businessContent h2 ,
#index .businessContent .h2 p {
	color: white;
	text-shadow: #FCC 1px 1px 12px , #000 1px -1px 5px,
				 #000 -1px 1px 5px, #FCC -1px -1px 12px;
}
#index .businessContent img {
	width: 181px;
	height: 113px;
	transform: rotateY(-35deg) rotateX(0deg);
	transition: transform .5s linear;
	position: absolute;
	right: 00px;
	bottom: 10px;
}
/*---------- business end ----------*/


#footer {
	text-align:center;
	height:28px;
	width:auto;
	background-color:#000;
	background-color:rgba(0,0,0,0.8);
	position:relative;
	bottom:0px;
	left:0px;
	right:0px;
}

#footer p {
	font-size:17px;
	line-height: 28px;
	margin:0 auto;
	text-align: center;
	color: white;
}

@keyframes blur {
    from { filter: blur(20px); }
    to { filter: blur(1px); }
}
@keyframes blur02 {
    from { filter: blur(20px); }
    to { filter: blur(3px); }
}
@keyframes slidein01 {
    from { top: -470px; left: -870px; }
    to { top: -120px; left: -20px; }
}
@keyframes slidein02 {
    from { top: 100vh; left: 100vw; }
    to { top: 320px; left: 90px; }
}
@keyframes slidein00 {
    from { top: 750px; left: -130px; }
    to { top: 300px; left: -10px; }
}
@keyframes beeSlide {
    from { bottom: 400px; right: 0px; }
    to { bottom: 2vw; right: 270px; }
}

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

@keyframes bubbleFloating01 {
    from { top: -220px; left: 80vw; }
    to { top: -940px; left: 75vw; opacity: 0}
}
@keyframes bubbleFloating02 {
    from { top: -295px; left: 25vw; }
    to { top: -1015px; left: 20vw; opacity: 0}
}
@keyframes bubbleFloating03 {
    from { top: -360px; left: 70vw; }
    to { top: -1080px; left: 65vw; opacity: 0}
}
@keyframes bubbleFloating04 {
    from { top: -410px; left: 40vw; }
    to { top: -1130px; left: 35vw; opacity: 0}
}
@keyframes bubbleFloating05 {
    from { top: -445px; left: 60vw; }
    to { top: -1165px; left: 55vw; opacity: 0}
}
.invisible {
	transition: opacity 1s ease;
	opacity: 0.0;
}

.visible {
	transition: opacity 1s ease;
	opacity: 1.0;
}