@charset "UTF-8";

*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	
	
}



body{
	
	width: 414px;
}



















.kao{
	width: 414px;
	height: 736px;
	position: relative;
	bottom:0px;
	z-index: 1;
	
	
	
	
}













.su{
	
font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 93px;
	position: relative;
	bottom:310px;
	left: 85px;
	color: #ffb12a;
	z-index: 20;
	
	 -webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px #FFF;
	 
	
	text-shadow:3px 3px 1px #FFF;
    
}
	




.ki{
	font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 90px;
	position: relative;
	bottom:453px;
	left: 170px;
	color: #ffb12a;
	z-index: 20;
	 -webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px #FFF;
    text-shadow:3px 3px 1px #FFF;
	
}



.wo{
	
	font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 80px;
	position: relative;
	bottom:585px;
	left: 240px;
	color: #ffb12a;
	z-index: 20;
	
     -webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px white;
	
	
	text-shadow:4px 4px 1px #c4dadb;
	
}




.mi{
	font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 86px;
	position: relative;
	bottom:540px;
	left: 61px;
	color: #ffb12a;
	z-index: 20;
	-webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px #ffb12a;
	
    
	text-shadow:3px 3px 1px white;
	
	
}




.tu{
	font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 75px;
	position: relative;
	bottom:660px;
	left: 129px;
	color: #ffb12a;
	z-index: 20;
	
	-webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px #ffb12a;
	
	text-shadow:3px 3px 1px white;
	
}



.ke{
	font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 74px;
	position: relative;
	bottom:778px;
	left: 192px;
	color: #ffb12a;
	z-index: 20;
	
	-webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px #ffb12a;
	
	text-shadow:3px 3px 1px white;
	
}




.yo{
	font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 74px;
	position: relative;
	bottom:890px;
	left: 248px;
	color: #ffb12a;
	z-index: 20;
	-webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px #ffb12a;
	
	text-shadow:3px 3px 1px white;
	
	
	
}




.u{
	font-family: senobi-gothic,sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 74px;
	position: relative;
	bottom:1005px;
	left: 295px;
	color: #ffb12a;
	z-index: 20;
	
	-webkit-text-stroke: 1.5px #ffb12a;
  text-stroke: 1.5px #ffb12a;
	
	text-shadow:3px 3px 1px white;
	
}



.sita{
	
	position: relative;
	bottom:30px;
	right: 10px;
}







.dai{
	transform: scale(0.85);
	position: relative;
	bottom:85px;
	z-index: 20;
	
}











.usiro{
	
	position: relative;
	bottom:222px;
	z-index: 2;
	
	
}





.main{
	
	font-family: 'Kaisei Opti', serif;

font-weight: 700;
font-style: normal;
	font-size:32px;
	text-shadow:1px 1px 0 #EFC13F, -1px -1px 0 #EFC13F,
              -1px 1px 0 #EFC13F, 1px -1px 0 #EFC13F,
              0px 1px 0 #EFC13F,  0-1px 0 #EFC13F,
              -1px 0 0 #EFC13F, 1px 0 0 #EFC13F;
	color: white;
	position: relative;
	bottom:1045px;
	left:70px;
	z-index: 3;
	letter-spacing:5px;
}


.main2{
	
	font-family: fot-chiaro-std,sans-serif;
font-weight: 700;
font-style: normal;
	font-size:32px;
	text-shadow:1px 1px 0 #EFC13F, -1px -1px 0 #EFC13F,
              -1px 1px 0 #EFC13F, 1px -1px 0 #EFC13F,
              0px 1px 0 #EFC13F,  0-1px 0 #EFC13F,
              -1px 0 0 #EFC13F, 1px 0 0 #EFC13F;
	color: white;
	position: relative;
	bottom:1045px;
	left:83px;
	z-index: 3;
	letter-spacing:5px;
}
	
	
	
	
	
	
	
	
	
	









.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}



.slide-in{
	
	font-family: zen-maru-gothic,sans-serif;
font-weight: 300;
font-style: normal;
	font-size: 18px;
	line-height: 2.7em;
	position:relative;
	bottom:770px;
	left:45px;
	z-index: 5;
		text-align: center;

}






.egao{
	
	width: 183px;
	height: 183px;
	position:relative;
	bottom:1250px;
	left:100px;
	z-index: 6;
	
	
	
	
	
	
	
}











.ao{
	
	position:relative;
	bottom:1620px;
	
	}


.mame{
	
	position:relative;
	bottom:570px;
		
}



.ni{
	position:relative;
	bottom:60px;
	
	
}















.pon{
	
	font-family: 'Kaisei Opti', serif;

font-weight: 1000;
font-style: normal;
	font-size:35px;
	text-shadow:0.5px 0.5px 0 #FF558E, -0.5px -0.5px 0 #FF558E,
              -0.5px 0.5px 0 #FF558E, 0.5px -0.5px 0 #FF558E,
              0px 0.5px 0 #FF558E,  0-0.5px 0 #FF558E,
              -0.5px 0 0 #FF558E, 0.5px 0 0 #FF558E;
	color: white;
	position: relative;
	bottom:2340px;
	left:55px;
	z-index: 3;
	letter-spacing:5px;

	
	
}




.pon2{
	
	font-family: 'Kaisei Opti', serif;

font-weight: 900;
font-style: normal;
	font-size:58px;
	text-shadow:1px 1px 0 #FF558E, -1px -1px 0 #FF558E,
              -1px 1px 0 #FF558E, 1px -1px 0 #FF558E,
              0px 1px 0 #FF558E,  0-1px 0 #FF558E,
              -1px 0 0 #FF558E, 1px 0 0 #FF558E;
	color: white;
	position: relative;
	bottom:2340px;
	left:180px;
	z-index: 3;
	letter-spacing:5px;

	
	
	
	
}





.otoko{
	
	position: relative;
	bottom:2260px;
	left:30px;
	z-index: 4;
	width: 250px;
	height: 230px;
	border-radius: 50px;
	
	
}




.onna{
	
	position: relative;
	bottom:2125px;
	left:140px;
	z-index: 4;
	width: 250px;
	height: 230px;
	border-radius: 30px;
	
	
}



.onna2{
	
	position: relative;
	bottom:1980px;
	left:30px;
	z-index: 5;
	width: 250px;
	height: 230px;
	border-radius: 30px;
	
	
	
	
}




.hukidasi{
	
	position:relative;
	bottom:2710px;
	right:50px;
	z-index: 10;
	
	
}



.hukidasi1{
	
	position: relative;
	bottom:2000px;
	left:200px;
	z-index: 10;
	
	
	
}



.hukidasi2{
	
	position: relative;
	bottom:2380px;
	left:15px;
	z-index: 10;
	transform: scale(-1, 1);
	
}










.yasu{
	
	font-family: zen-maru-gothic,sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 20px;
	position:relative;
	bottom:2490px;
	left:200px;
	z-index: 5;
	color: white;
	text-decoration: none;
	
}


.kana{
	
	font-family: zen-maru-gothic,sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 20px;
	position:relative;
	bottom:2120px;
	right:100px;
	z-index: 5;
	color: white;
	text-decoration: none;
}
	



.mana{
	
	font-family: zen-maru-gothic,sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 20px;
	position:relative;
	bottom:1770px;
	left:200px;
	z-index: 5;
	color:white;
	
	
	
}




 


.hako{
	
	width: 414px;
	height: 360px;
	background-color:#69C4D8 ;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	
	
	position:relative;
	bottom: 2600px;
	border-radius: 0px;
	z-index: 3
	
}


.hako:hover {
    background-color:pink;
	opacity:0.8;
    }


.hako2{
	width: 414px;
	height: 360px;
	background-color:#69C4D8 ;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	position:relative;
	bottom: 2600px;
	
	z-index: 3
	
}


.hako2:hover {
    background-color:pink;
	opacity:0.8;
    }






.hako3{
	width: 414px;
	height: 370px;
	background-color:#69C4D8 ;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	position:relative;
	bottom: 2600px;
	
	z-index: 3
	
	
	
}



.hako3:hover {
   background-color:pink;
	opacity:0.8;
    }




.iro{
	
	position:relative;
	bottom:500px;
}







/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
	bottom:3075px;
	left:210px;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: white;
    text-decoration: none;
    outline: none;
	z-index: 5;
	font-family: 'Kaisei Opti', serif;
	font-size: 25px;
	
	
	
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 2px;
	background:white;
    /*アニメーションの指定*/
    transition: all .3s;
	
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:2px;
	background:white;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
	
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}








.iti{
	
	font-family: 'Kaisei Opti', serif;

font-weight: 900;
font-style: normal;
	font-size:35px;
	position: relative;
	bottom:2680px;
	left:55px;
	z-index: 5;
	text-shadow:1px 1px 0 #EFC13F, -1px -1px 0 #EFC13F,
              -1px 1px 0 #EFC13F, 1px -1px 0 #EFC13F,
              0px 1px 0 #EFC13F,  0-1px 0 #EFC13F,
              -1px 0 0 #EFC13F, 1px 0 0 #EFC13F;
	color: white;
	letter-spacing:2px;
	
}





.kotoba{
	
	position:relative;
	bottom:270px;
	
	
	
}










.pu{
	width: 414px;
	height: 1950px;
	position:relative;
	bottom:2820px;
	
	
	background-color: #FFFDAC
	
}



.bunnya{
	
	position: relative;
	bottom:1930px;
	
	
	
}











.sikaku{
	
	width: 360px;
	height: 300px;
	background-color:#FFFEF9;
	position: relative;
	bottom:2590px;
	left:27px;
	box-shadow: 10px 10px 0px 0 #B5E5EA;
	border-radius: 10px;
	
}



.sikaku2{
	width: 360px;
	height: 300px;
	background-color:#FFFEF9 ;
	position: relative;
	bottom:2525px;
	left:27px;
	box-shadow: 10px 10px 0px 0 #B5E5EA;
	border-radius: 10px;
	
	
	
}



.sikaku3{
	
	width: 360px;
	height: 300px;
	background-color: #FFFEF9;
	position: relative;
	bottom:2460px;
	left:27px;
	box-shadow: 10px 10px 0px 0 #B5E5EA;
	border-radius: 10px;
	
	
}



.sikaku4{
	width: 360px;
	height: 320px;
	background-color: #FFFEF9;
	position: relative;
	bottom:2395px;
	left:27px;
	box-shadow: 10px 10px 0px 0 #B5E5EA;
	border-radius: 10px;
	
}




.first{
	
	width: 340px;
	height: 226px;
	position:relative;
	top:10px;
	left:10px;
	
}




.second{
	
	width: 340px;
	height: 226px;
	position:relative;
	top:10px;
	left:10px;
	
}



.third{
	
	width: 340px;
	height: 226px;
	position:relative;
	top:10px;
	left:10px;
	
	
	
	
	
}



.forth{
	
	width: 340px;
	height: 226px;
	position:relative;
	top:10px;
	left:10px;
	
	
	
}






.a{
	font-family: zen-maru-gothic,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;	
letter-spacing: 5px;
background-color: #EFC13F;
color: white;
margin-right: 260px;
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 3px;
	padding-left: 23px;
	padding-bottom: 5px;
	padding-right: 10px;
	
	position: relative;
	bottom:232px;
	z-index: 7;
}




.b{
	font-family: zen-maru-gothic,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;	
letter-spacing: 5px;
background-color: #EFC13F;
color: white;
margin-right: 260px;
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 3px;
	padding-left: 23px;
	padding-bottom: 5px;
	padding-right: 10px;
	
	position: relative;
	bottom:232px;
	z-index: 7;
	
}





.c{
	
	font-family: zen-maru-gothic,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;	
letter-spacing: 5px;
background-color: #EFC13F;
color: white;
margin-right: 260px;
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 3px;
	padding-left: 23px;
	padding-bottom: 5px;
	padding-right: 10px;
	
	position: relative;
	bottom:232px;
	z-index: 7;
	
	
	
	
}



.d{
	
	font-family: zen-maru-gothic,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;	
letter-spacing: 5px;
background-color: #EFC13F;
color: white;
margin-right: 260px;
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 3px;
	padding-left: 23px;
	padding-bottom: 5px;
	padding-right: 10px;
	
	position: relative;
	bottom:232px;
	z-index: 7;
	
}



.a1{
	font-family: zen-maru-gothic,sans-serif;
    font-weight: 200;
    font-style: normal;
	position:relative;
	bottom:10px;
	left:60px;
}



.b1{
	font-family: zen-maru-gothic,sans-serif;
    font-weight: 200;
    font-style: normal;
	position:relative;
	bottom:10px;
	left:50px;
	
	
	
}



.c1{
	font-family: zen-maru-gothic,sans-serif;
    font-weight: 200;
    font-style: normal;
	position:relative;
	bottom:10px;
	left:60px;
	
	
	
	
}



.d1{
	font-family: zen-maru-gothic,sans-serif;
    font-weight: 200;
    font-style: normal;
	position:relative;
	bottom:15px;
	left:5px;
	text-align: center;
	
	
	
}




.san{
	position: relative;
	bottom:300px;
	
	
}




.sankaku{
	
	width: 0;
height: 0;
border-style: solid;
border-width: 0 0 52px 414px;
border-color: transparent transparent #69C4D8 transparent;

	position: relative;
	bottom:4518px;
	z-index: 2;

}




.se{
	background-color: #69C4D8;
	height: 450px;
	position:relative;
	bottom:4520px;
	z-index: 3;
	
}




.kao2{
	width: 250px;
	height:410px;
	position: relative;
	bottom:5150px;
	left:150px;
	z-index: 4;
	 transform: rotate(-5deg)
	
	
}




.kao3{
	
	width: 150px;
	height:280px;
	position: relative;
	bottom:5040px;
	right:190px;
	z-index: 4;
	 transform: scale(-1, 1);
	transform: rotate(deg)
	
}







    




.hosi{
	
	width: 50px;
	height: 50px;
	position: relative;
	bottom:5460px;
	left: 60px;
	z-index: 20;
	
}



.hosi2{
	width: 130px;
	height: 130px;
	position: relative;
	bottom:5130px;
	left: 170px;
	z-index: 31;
	
	
	
	
	
}









.uz{width: 414px;
	position: relative;
	bottom: 5080px;
	z-index: 33;
	
	
}




























