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

p{
	letter-spacing:  0.3px;
}

a{
	letter-spacing:  0px;
}

.container2{
display: block;
position:relative;
width:800px;
margin: 0 auto;
padding: 0;
height: 700px;
background-color: #fff;
margin-top: 580px;
}


.container2 p{
font-family: 'Kosugi Maru', sans-serif;
text-align: center;
padding-top: 150px;
line-height: 30px;
}




.botan a{
position: absolute;
font-family: 'Kosugi Maru', sans-serif;
font-size: 1.2em;
width: 300px;
text-align: center;
padding: 10px;
border-radius: 5px;
text-decoration: none;


}



.botan a:first-of-type{
top: 300px;
left: 0;
right: 0;
margin: auto;
background-color: #afcbeb;
color: #1b1464;
box-shadow: 4px 4px 0px 0 rgba(27,20,100,1);
/*animation-name: anim_p;
animation-duration: 3s;
animation-iteration-count: infinite;*/
}

@keyframes anim_p {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 5px);
}
100% {
transform: translate(0, 0px);
}
}


.botan a:nth-of-type(2){
top: 360px;
left: 0;
right: 0;
margin: auto;
background-color: #b2d5c2;
color: #005925;
box-shadow: 4px 4px 0px 0 rgba(0,89,37,1);
/*animation-name: anim_p;
animation-duration: 3s;
animation-iteration-count: infinite;*/
}

.botan a:nth-of-type(3){
top: 420px;
left: 0;
right: 0;
margin: auto;
background-color: #f8f6de;
color: #ef7c00;
box-shadow: 4px 4px 0px 0 rgba(239,124,0,1);

}

.botan a:hover{
margin-top: 3px;
/*animation-iteration-count: 0;*/
	animation-name: anim_p;
animation-duration: 3s;
animation-iteration-count: infinite;
}


.container3{
	display: block;
	position:relative;
	width:800px;
	margin: 0 auto;
	padding: 0;
	height: 1200px;
	background-color: #fff;
	overflow:hidden;
}


.container3 a:hover,.container4 a:hover,.container5 a:hover{
margin-top: 3px;
	box-shadow: none!important;
box-shadow: 2px 2px 2px 0 rgba(239,124,0,0.1)inset;
/*animation-iteration-count: 0;*/
}

#uneune{
	position: absolute;
	top: 230px;
	left: -50px;
	width: 950px;
	
}

h2{
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
	color: #1b1464;
	right: 20px;
	top: 300px;
}

.container3 p{
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
		right: 20px;
	top: 350px;
	font-size: 12px;
	line-height: 19px;
}

.container3 a{
	position: absolute;
		right: 50px;
	top: 460px;
	width: 80px;
	font-size: 12px;
	font-weight: 700;
		font-family: 'Kosugi Maru', sans-serif;
	padding: 10px;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
}


.container3 a{
	background-color: #afcbeb;
	color: #1b1464;
	box-shadow: 4px 4px 0px 0 rgba(27,20,100,1);
	width: 90px;
}

.container3 img:nth-of-type(2){
	position: absolute;
	width: 150px;
	top:100px;
	left: 190px;
	 animation-name: anim_s;
  transform: rotate(5deg);
  animation-duration: 2s;
	 animation-iteration-count: infinite;

}

.container3 img:nth-of-type(3){
	position: absolute;
	width: 150px;
	top:130px;
	left: 330px;
	 animation-name: anim_s2;
  transform: rotate(180deg);
  animation-duration: 5s;
	 animation-iteration-count: infinite;

}

.container3 img:nth-of-type(4){
	position: absolute;
	width: 150px;
	top:530px;
	left: 390px;
	 animation-name: anim_s3;
  transform: rotate(-5deg);
  animation-duration: 3s;
	 animation-iteration-count: infinite;

}


.container3 img:nth-of-type(5){
	position: absolute;
	width: 150px;
	top:630px;
	left: 170px;
	 animation-name: anim_s4;
  transform: rotate(-5deg);
  animation-duration: 4s;
	 animation-iteration-count: infinite;

}


.container3 img:nth-of-type(6){
	position: absolute;
	width: 300px;
	top:670px;
	right: 70px;
	 animation-name: anim_po;
  transform: rotate(5deg);
  animation-duration: 3s;
	 animation-iteration-count: infinite;

}

@keyframes anim_s {
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes anim_s2 {
  50% {
    transform: rotate(190deg);
  }
  100% {
    transform: rotate(180deg);
  }
}


@keyframes anim_s3 {
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}


@keyframes anim_s4 {
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes anim_po {
  50% {
    top: 680px;
  }
  100% {
    top: 670px;
  }
}




.container4{
display: block;
position:relative;
width:800px;
margin: 0 auto;
padding: 0;
height: 1200px;
background-color: #fff;

}

h3{
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
	z-index: 1;
	color: #009245;
	font-size: 14px;
	transform: rotate(-20deg);
	left: 20px;
	top: -30px;
}


#une{
position: absolute;
top: -100px;
left: 100px;
width: 700px;
cursor: pointer;
}






#une2{
position: absolute;
top: -100px;
left: 100px;
width: 700px;
	cursor: pointer;
}



#une2 svg:hover{
opacity: 0;
transition:0.5s;
}



#uneune2{
	position: absolute;
	top: 600px;
	left: 100px;
	
}


.container4 h2{
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
	color: #009245;
	right: 100px;
	top: 350px;
}

.container4 p:first-of-type{
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
	right: 123px;
	top: 400px;
	font-size: 12px;
	line-height: 19px;
}


.container4 a{
	background-color: #b2d5c2;
color: #005925;
box-shadow: 4px 4px 0px 0 rgba(0,89,37,1);
	font-size: 12px;
	font-weight: 700;
		font-family: 'Kosugi Maru', sans-serif;
	padding: 10px;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	width: 90px;
}

.container4 a:first-of-type{
	position: absolute;
		right: 100px;
	top: 550px;

	
}

.container4 a:first-of-type::before{
	position: absolute;
	content: "すかし絵";
	width: 100px;
	right: 100px;
	color: #000;
}



.container4 a:nth-of-type(2){
	position: absolute;
		right: 100px;
	top: 610px;

	z-index: 1;
}

.container4 a:nth-of-type(2)::before{
	position: absolute;
	content: "ラッピング";
	width: 100px;
	right: 100px;
	color: #000;
}


.container4 img:first-of-type{
	position: absolute;
	width: 150px;
	top: 360px;
	right: 400px;
	 animation-name: anim_s;
  transform: rotate(5deg);
  animation-duration: 2s;
	 animation-iteration-count: infinite;

}

.container4 img:nth-of-type(2){
	position: absolute;
	width: 100px;
	top:700px;
	right: 50px;
	 animation-name: anim_s;
  transform: rotate(5deg);
  animation-duration: 2s;
	 animation-iteration-count: infinite;

}

.container4 img:nth-of-type(3){
	position: absolute;
	width: 150px;
	top: 930px;
	right: 200px;
	 animation-name: anim_s4;
  transform: rotate(-5deg);
  animation-duration: 5s;
	 animation-iteration-count: infinite;
}


.container4 p:nth-of-type(2){
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
	left: 100px;
	top: 880px;
	font-size: 12px;
	line-height: 19px;
}

.container5{
		display: block;
	position:relative;
	width:800px;
	margin: 0 auto;
	padding: 0;
	height: 1100px;
	background-color: #fff;
	overflow:hidden;
}


#uneune3{
	position: absolute;
	width: 600px;
	top: 200px;
	right: -120px;
	
}

#uneune4{
	position: absolute;
	width: 600px;
	top: 450px;
	left: 30px;
	
}



.container5 h2{
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
	color: #ef7c00;
	right: 10px;
	top: 600px;
}

.container5 p{
	position: absolute;
	font-family: 'Kosugi Maru', sans-serif;
	right: 50px;
	top: 650px;
	font-size: 12px;
	line-height: 19px;
}

.container5 a{
	position: absolute;
		right: 50px;
	top: 770px;
	width: 80px;
	font-size: 12px;
	font-weight: 700;
		font-family: 'Kosugi Maru', sans-serif;
	padding: 10px;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
}

.container5 a{
background-color: #f8f6de;
color: #ef7c00;
	width: 90px;
box-shadow: 4px 4px 0px 0 rgba(239,124,0,1);
}



.container5 img:nth-of-type(2){
	position: absolute;
	width: 100px;
	top: 300px;
	left: 180px;
	 animation-name: anim_s3;
  transform: rotate(-5deg);
  animation-duration: 3s;
	 animation-iteration-count: infinite;

}

.container5 img:nth-of-type(3){
	position: absolute;
	width: 150px;
	top:750px;
	left: 200px;
	 animation-name: anim_s;
  transform: rotate(5deg);
  animation-duration: 4s;
	 animation-iteration-count: infinite;

}