@charset "utf-8";

/*===================================================
背景模様
===================================================*/
.pattern01,.pattern02,.pattern03,.pattern04,.pattern05,.pattern06,.pattern07,.pattern08,.pattern09,.pattern10,
.pattern11,.pattern12,.pattern13,.pattern14,.pattern15,.pattern16,.pattern17,.pattern18,.pattern19,.pattern20,
.pattern21,.pattern22,.pattern23,.pattern24,.pattern25,.pattern26,
.pattern01 {
    position: absolute;
    background-size: contain;
    z-index: 2;
}

.pattern01 {
    background: url("../images/pattern01.png") no-repeat;
    background-size: contain;
    width: 450px;
    height: 450px;
    top: -10%;
    left: -5%;
}
.pattern02 {
    background: url("../images/pattern02.png") no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    bottom: 5%;
    right: 10%;
}
.pattern03 {
    background: url("../images/pattern03.png") no-repeat;
    background-size: contain;
    width: 300px;
    height: 300px;
    top: 20%;
    left: -5%;
}
.pattern04 {
    background: url("../images/pattern04.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    top: 50%;
    right: 10%;
}
.pattern05 {
    background: url("../images/pattern05.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    top: 70%;
    left: 0;
}
.pattern06 {
    background: url("../images/pattern06.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    top: 30%;
    right: 10%;
}
.pattern07 {
    background: url("../images/pattern07.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    top: 70%;
    left: 15%;
}
.pattern08 {
    background: url("../images/pattern08.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    bottom: -20%;
    right: -5%;
}
.pattern09 {
    background: url("../images/pattern09.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    top: 20%;
    left: 5%;
}
.pattern10 {
    background: url("../images/pattern10.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    bottom: -10%;
    right: -5%;
}
.pattern11 {
    background: url("../images/pattern11.png") no-repeat;
    background-size: contain;
    width: 300px;
    height: 300px;
    top: 20%;
    left: 5%;
}
.pattern12 {
    background: url("../images/pattern12.png") no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    top: 66%;
    left: 55%;
}
.pattern13 {
    background: url("../images/pattern13.png") no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    bottom: 3%;
    left: 23%;
}
.pattern14 {
    background: url("../images/pattern14.png") no-repeat;
    background-size: contain;
    width: 300px;
    height: 300px;
    bottom: -5%;
    right: 8%;
}
.pattern15 {
    background: url("../images/pattern15.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    top: 45%;
    left: 45%;
}
.pattern16 {
    background: url("../images/pattern16.png") no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    bottom: 25%;
    left: 0;
}
.pattern18 {
    background: url("../images/pattern18.png") no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    top: 20%;
    left: 72%;
}
.pattern19 {
    background: url("../images/pattern19.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    bottom: -8%;
    left: 2%;
}
.pattern20 {
    background: url("../images/pattern20.png") no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    top: 35%;
    left: 60%;
}
.pattern21 {
    background: url("../images/pattern21.png") no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    bottom: 10%;
    left: 13%;
}
.pattern22 {
    background: url("../images/pattern22.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    bottom: -10%;
    right: 8%;
}
.pattern23 {
    background: url("../images/pattern23.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    bottom: 18%;
    left: 17%;
}
.pattern24 {
    background: url("../images/pattern24.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    bottom: -10%;
    right: 3%;
}
.pattern25 {
    background: url("../images/pattern25.png") no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    bottom: 35%;
    left: 10%;
}
.pattern26 {
    background: url("../images/pattern26.png") no-repeat;
    background-size: contain;
    width: 300px;
    height: 300px;
    bottom: -15%;
    right: 10%;
}


@media screen and ( max-width:768px ) {

.pattern01 {
		width: 180px;
		height: 180px;
    top: -2%;
    left: -5%;
}
.pattern02 {
		width: 120px;
		height: 120px;
    bottom: -20%;
    right: -10%;
}
.pattern03 {
		width: 100px;
		height: 100px;
    top: 20%;
    left: -5%;
}
.pattern04 {
		width: 150px;
		height: 150px;
    bottom: 0;
    right: 10%;
}
.pattern05 {
		width: 150px;
		height: 150px;
    top: 70%;
    left: 0;
}
.pattern06 {
		width: 150px;
		height: 150px;
    top: 30%;
    right: 10%;
}
.pattern07 {
		width: 150px;
		height: 150px;
    top: 60%;
    left: -12%;
}
.pattern08 {
		width: 150px;
		height: 150px;
    bottom: -25%;
    right: -20%;
}
.pattern09 {
		width: 100px;
		height: 100px;
    top: 17%;
    left: -2%;
}
.pattern10 {
		width: 110px;
		height: 110px;
    bottom: -5%;
    right: -5%;
}
.pattern11 {
		width: 150px;
		height: 150px;
    top: 26%;
    left: 0;
}
.pattern12 {
		width: 80px;
		height: 80px;
    top: 60%;
    right: 0;
}
.pattern13 {
		width: 120px;
		height: 120px;
    bottom: -5%;
    left: 4%;
}
.pattern14 {
		width: 120px;
		height: 120px;
    bottom: 18%;
    right: -6%;
}
.pattern15 {
		width: 120px;
		height: 120px;
    top: 53%;
    left: 51%;
}
.pattern16 {
		width: 120px;
		height: 120px;
    bottom: 25%;
    left: 0;
}
.pattern17 {
		width: 120px;
		height: 120px;
    bottom: 25%;
    left: 0;
}
.pattern18 {
		width: 130px;
		height: 130px;
    top: 13%;
    left: 72%;
}
.pattern19 {
		width: 150px;
		height: 150px;
    bottom: -8%;
    left: -8%;
}
.pattern20 {
		width: 120px;
		height: 120px;
    top: 24%;
    left: 60%;
}
.pattern21 {
		width: 120px;
		height: 120px;
    bottom: 27%;
    left: 13%;
}
.pattern22 {
		width: 100px;
		height: 100px;
    bottom: -10%;
    right: 8%;
}
.pattern23 {
		width: 100px;
		height: 100px;
    bottom: 27%;
    left: 1%;
}
.pattern24 {
		width: 100px;
		height: 100px;
    bottom: -4%;
    right: 3%;
}
.pattern25 {
		width: 60px;
		height: 50px;
    top: 2%;
    left: 5%;
}
.pattern26 {
		width: 120px;
		height: 120px;
    bottom: -20%;
    right: 5%;
}
}

/*===================================================
アニメーション
===================================================*/

/****--------- ふわふわ ---------****/
.fwari{
  animation:fwari ease-in-out 2s infinite alternate;
  -webkit-animation:fwari ease-in-out 2.5s infinite alternate;
  -moz-animation:fwari ease-in-out 2s infinite alternate;
}
.fwari2{
  animation:fwari ease-in-out 3s infinite alternate;
  -webkit-animation:fwari ease-in-out 3s infinite alternate;
  -moz-animation:fwari ease-in-out 3s infinite alternate;
}
.fwari3{
  animation:fwari ease-in-out 2.5s infinite alternate;
  -webkit-animation:fwari ease-in-out 2s infinite alternate;
  -moz-animation:fwari ease-in-out 2.5s infinite alternate;
}
@keyframes fwari{
  0%   { transform:translate(0%, 0%); }
  100% { transform:translate(0%, -30px); }
}
@-webkit-keyframes fwari{
  0%   { -webkit-transform:translate(0%, 0%); }
  100% { -webkit-transform:translate(0%, -20px); }
}

@-moz-keyframes fwari{
  0%   { -moz-transform:translate(0%, 0%); }
  100% { -moz-transform:translate(0%, -30px); }
}