@charset "utf-8";
html {font-size: 62.5%;}
body {padding:0; margin:0;}
.sp {display:none;}
.Red {color: #FF0004;}
.clear {clear:both;}
#lf_wrap a{color: #000; text-decoration: none; text-align: center;}
#lf_wrapper{background-color: #7acdf4;}
#lf_wrap {
	clear: both;
	width:100%;
	max-width: 1200px;
	padding: 0 0 10%;
	margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #000000;	
}

.main {width: 70%; margin:0 auto 10%;}

.bold{font-size: 120%; font-weight: bold;
	display: inline-block;
	margin-bottom: 2%;}

.red{color: #CC0D10; font-weight: bold;}

.txt_BOX{width: 80%; margin: 0 auto 1%; height: 320px; position: relative;}
.kumo1{width: 20%; position: absolute; top: 3%; left: 2%;}
.kumo2{width: 25%; position: absolute; top: 5%; right: 2%;}
.kumo3{width: 8%; position: absolute; bottom: 3%; right: 15%;}
.txt1{width: 80%; position: absolute; top: 25%; left: 10%; font-size: 16px; line-height: 1.9em; text-align: center;}

/*item-----------------------*/
.item_box{	width: 80%;	margin: 1% auto 0;	display:flex;	flex-wrap:wrap;	justify-content: space-between;}
.item1{	width: 30%;	margin: 0 0 7%;	/*display: flex;	flex-direction: column;*/}

.item_n{ width: 100%; margin: 2% auto 0; font-size: 16px; text-align: center; line-height: 1.8em;	font-weight: bold;}

.present_BOX{ width: 50%;	margin: 3% auto 0;	display:flex; flex-wrap:wrap;	justify-content: space-between; align-items: center;}
.present1{width: 48%; margin: 0 ;}
.present2{width: 50%; margin: 0 ;}

.btn_BOX{ width: 40%;	margin: 10% auto 10%;	}


/*.credit {	width: 99.5%;	margin:2% auto;}
.cmt{	width: 98%;	margin: 4% 0 0 2%;	text-align: left;	font-size: 1.4rem;	line-height: 1.7em;}
.credit {width: 92%; margin:2% 0 2% 0;}


.sml{font-size: 15px}
.sml2{font-size: 14px}
.item_p{	width: 100%;	margin: 1% 0 0;	font-size: 1.3rem;	text-align: center;}
.tax{font-size: 70%;}*/


/* General button style (reset) */
.btn {
	border: none;
	font-family: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;
	letter-spacing: 1px;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	margin: 2% auto 8%;
	text-transform: uppercase;
	margin-top: auto;
}


.btn-1 {
	width: 50%;
    color: #000;
    text-align: center;
    margin: 3% auto 5%;
    display: block;
    padding: 12px 0px;
    font-size: 17px;
	font-weight: 700;
    background-color: #fff;
	border: 1px solid #000;
}

.btn:hover {
	color: #fff;
	background-color: #7C7C7C;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	border: 1px solid #000;
}

.anime1{
    transform-origin: center bottom;
    animation: yurayura 4s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(8deg);
  }
  50%{
      transform: rotate(-8deg);
  }
}

.anime2 {
    animation: shake-up 3s infinite ease-in-out;
}

@keyframes shake-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.anime3 {
    animation: shake-side 3s infinite ease-in-out;
}

@keyframes shake-side {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}


.anime4 img {
  animation: deka 3s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes deka {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

@media only screen and (max-width: 750px) {
	#lf_wrap {width: 100%; margin: 0; padding: 0 0 10%;}
	.main {margin:0 auto 15%; width: 100%;}
	.sp {display:block;}	
	.pc{display: none;}
	
	.txt_BOX{width: 100%; margin: 0 auto; height: 350px; position: relative;}
	.kumo1{width: 25%; position: absolute; top: 2%; left: 1%;}
	.kumo2{width: 28%; position: absolute; top: 5%; right: 1%;}
	.kumo3{width: 8%; position: absolute; bottom: 1%; right: 4%;}
	.txt1{width: 90%; position: absolute; top: 10%; left: 5%; font-size: 14px; text-align: center;}

/*item-------------------------------------*/
	.item_box{width: 92%; margin: 3% auto 2%; padding-bottom: 2%;}
	.item1{width: 47%; margin: 0 0 8%;}

	.item_n{font-size: 13px;}
	
	
	.present_BOX{ width: 80%;	margin: 5% auto 0;	}
	.btn_BOX{ width: 80%;	margin: 15% auto 10%;	}

/* Button 1 */
	.btn-1 {
		width: 70%;
		margin: 4% auto 5%;
		padding: 8px 0px;
		font-size: 14px;
	}

}