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

 

p,h1,h2,h3,h4,h5,h6{
	margin-top: 0;
}

img{
	
	vertical-align: bottom;
}

a {
    text-decoration:none; 
}

ul {
	margin:0;
	padding: 0;
}


body{
}




h3 {
	position: relative;
	text-align: center;
	margin: 30px 0px 25px 0px;
	font-size: 10px;
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
font-style: normal;
}

h4{
	position: relative;
	text-align: center;
	margin: 20px 0px 50px 0px;
	font-size: 8px;
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
font-style: normal;
	
}

h5 {
	text-align: center;
	color: #ffdc6e;
	margin: 50px 0px 20px 0px;
	font-size: 22px;
	font-family: "bungee", sans-serif;
	font-weight: 400;
	font-style: normal;
}


.top-box {
    position: relative;
	width: 600px;
	margin-bottom: 0px;
	z-index: 25;
}

.title{
	position: absolute;
	display: block;
	text-align: center;
	top:6%;
	left: 0;
 	right: 0;
    margin: auto;
	width: 60vw;
	max-width: 550px;	
	
}

.title img{
	width: 100%;
}

.titleimage{
	position: relative;
	display: block;
	text-align: center;
	top:0%;
	left: 0;
 	right: 0;
    margin: auto;
	width: 100vw;
	max-width: 750px;	
	
}

.titleimage img{
	width: 100%;
}

.titleshita{
	position: absolute;
	display: block;
	text-align: center;
	bottom:10%;
	left: 0;
 	right: 0;
    margin: auto;
	width: 50vw;
	max-width: 500px;	
	
}

.titleshita img{
	width: 100%;
}


.bigbox{
	display: flex;
	width: 100vw;
	height: 100%; 
	margin-bottom: 10px;
}


.itembox{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	gap: 20px 5%;
}



.item{
	    width: 30%;

}


.item img{
	width: 100%;
}

.mordalnaka{
	    width: 400px;
		padding: 30px;
		margin: 0 auto;
}


.mordalnaka img{
	width: 100%;
}



.foot{
	bottom: 0;
	width: 100vw;
	height: 150px;
	background-color: #0057a7;
	margin-top: 180px;
}

.footlogo{
	padding-top: 20px;
    margin: 0 auto;
	width: 350px;

}

.footlogo img{
	width: 100%;
}





.maintext{
	position: relative;
	display: block;
	text-align: justify;
	font-size: 14px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	padding-left: 5%;
	padding-right: 5%;
	left: 0;
	right: 0;
	letter-spacing: 0.02em;
	line-height:200%;
 	color: #000000;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 500;
	max-width: 700px;
	}



.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


.js-animation img { 
	width: 100%;
}


.js-animation2 {
  opacity: 1;
  visibility: visible;
  filter: grayscale(100%);
  transition: all 2s;
}
.js-animation2.is-show {
  opacity: 1;
  visibility: visible;
  filter:grayscale(0);
}


.js-animation2 img { 
	width: 100%;
}


.js-animation3 {
  opacity: 1;
}
.js-animation3.is-show {
  opacity: 1;
  animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		}
	to{
		transform: rotateY(-360deg);
		}
}


.js-animation3 img { 
	width: 100%;
}


.js-animation4 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation4.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


.js-animation4 img { 
	width: 100%;
}


.js-animation5 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation5.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


.js-animation5 img { 
	width: 100%;
}



.creditbox{
	padding-top: 10px;
	padding-bottom: 100px;
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 30px;
	width: 90vw;	
}


.credit{
	margin: 0 auto;
	padding-left: 50px;
	text-align: left;
	font-size: 15px;
	letter-spacing: 0em;
	line-height:2em;
	color: #db5c2f;
	text-decoration: none;
	font-family: nimbus-sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	
}


.credit a{
	color: #db5c2f;
}

.credit p{
	color: #db5c2f;
}

span {
	display: inline-block;
	margin-right: 10px;
}

span2 {
	border-bottom: solid 1.5px #fff;
}

span3 {
}

span5 {
	border-bottom: solid 1.5px #000;
}

span6{
line-height:1.4em;	
}


.credit001{
	margin: 0 auto;
	padding:500px 50px;
	text-align: center;
	font-size: 26px;
	letter-spacing: 0.05em;
	line-height:2em;
	color: #ffffff;
	text-decoration: none;
	font-family: "ohno-blazeface", sans-serif;
	font-weight: 300;
	font-style: normal;
	white-space: nowrap;
}


.credit001 a{
	color: #fff;
}

.credit001 p{
	color: #fff;
}

.credit002{
	margin-top: 300px;
	text-align: left;
	font-size: 26px;
	letter-spacing: 0.05em;
	line-height:1.5em;
	color: #000;
	text-decoration: none;
	font-family: "ohno-blazeface", sans-serif;
	font-weight: 300;
	font-style: normal;
	white-space: nowrap;
}


.credit002 a{
	color: #000;
}

.credit002 p{
	color: #000;
}

.credit002b{
	margin-top: 20px;
	margin-left: 20px;
	text-align: left;
	font-size: 26px;
	letter-spacing: 0.05em;
	line-height:1.5em;
	color: #fff;
	text-decoration: none;
	font-family: "ohno-blazeface", sans-serif;
	font-weight: 300;
	font-style: normal;
	white-space: nowrap;
}


.credit002b a{
	color: #fff;
}

.credit002b p{
	color: #fff;
}

.credit003{
	margin: 0 auto;
	padding:50px;
	text-align: center;
	font-size: 26px;
	letter-spacing: 0.05em;
	line-height:2em;
	color: #ffffff;
	text-decoration: none;
	font-family: "ohno-blazeface", sans-serif;
	font-weight: 300;
	font-style: normal;
	white-space: nowrap;
}


.credit003 a{
	color: #fff;
}

.credit003 p{
	color: #fff;
}


.text001{
	transform-origin: 20% 50%;
	margin: 0 auto;
	text-align: left;
	font-size: 50px;
	line-height:2em;
	color: #86807e;
	text-decoration: none;
	font-family: "opake", sans-serif;
	font-weight: 900;
	font-style: normal;
	white-space: nowrap;
}


.text001 a{
	color: #86807e;
}

.text001 p{
	color: #86807e;
}


.bottomlink{
	display: flex;
	display: -webkit-flex;
	top:0;
	right: 0;
	width: 100%;
	margin-right:0px;
	margin-top: 0px;
}

.pretext{
	display: inline-block;
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height:1em;
	color: #ffffff;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 600;
	margin: 22px auto;
	border-bottom: solid 2px #ffffff;
	}

.pretext a{
	text-decoration: none;
}





.moviestyle{
	margin: 0 auto;
	padding-bottom: 120px;
	width: 90vw;
	max-width: 700px;
}



/* ハロサン用追加 */



.photo01{
	width: 100%;
	max-width: 600px;
	margin: 50px auto;	
}

.photo01 img{
	width: 100%
}


.photo02{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;	
}

.photo02 img{
	width: 100%
}

.tap{
	width: 200px;
	margin: 10px auto 2px auto;	
}

.photo01 img{
	width: 100%
}



.fade-img-box01 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box01 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box02 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box02 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box03 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box03 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box04 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box04 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box05 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box05 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box06 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box06 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box07 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box07 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box08 {
 width: 100%;
 height: 800px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box08 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}




.layout{
		top:30px;
		display: -webkit-flex;
    	display: flex;
    	-webkit-justify-content: center;
    	justify-content: center;
    	-webkit-align-items: center;
    	align-items: center;
   		flex-wrap: wrap;
		text-align: center;
		margin: 0 auto;
		width: 100%  !important;
		max-width: 750px;
}

.layout02{
		top:95px;
		left: 0;
		right: 0;
		text-align: center;
		margin: 0 auto;
		max-width: 750px;
}

.itemall{
	width: 100vw;
	margin-top: 10px;
	margin-bottom: 20px;
}

.parent_box {
  width: 100vw;
  max-width: 600px;
  display: flex;
	margin: 20px auto;
}

.side_image{
	width: 80%;
}

.side_image img{
	width: 100%;
}

.side_text_box{
	width: 100%;
}


.note{
	position: relative;
	width: 100vw;
	height: auto;
	max-width: 600px;
	margin: 10px auto 0px;	
	padding-bottom: 250px;
}

.pr{
	position: relative;
	width: 100vw;
	height: 520px;
	max-width: 600px;
	margin: 0px auto 0px;	
	padding-bottom: 0px;
}

.prcopy{
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;	
}

.prcopy img{
	width: 100%
}

.hello{
	position: absolute;
	right: 40px;
	top:370px;
	width: 200px;
}

.hello img{
	width: 100%
}


.sweatbase{
	position: relative;
	width: 100vw;
	height: 500px;
	max-width: 600px;
	margin: 50px auto 0px;	
	padding-bottom: 0px;
}

.sweat{
	position: absolute;
	top:0;
	left:0;
	right: 0;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;	
}

.sweat img{
	width: 100%
}

.sweaticon{
	position: absolute;
	top:50px;
	right: 20px;
	width: 130px;
	margin: 0 auto;	
	animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}


.creditbox02{
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
	width: 90vw;	
}

.creditbox03{
	padding-top: 40px;
	padding-bottom:0px;
	margin-bottom: 30px;
	width: 100%;	
}

.creditbox04{
	padding-top: 10px;
	padding-bottom: 100px;
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 30px;
	width: 90vw;	
}

.bgcolor01{
	position: relative;
    top: 0;
    left: 50%;
    display: block;
    width: 100vw;
    height: 1980px;
    background: #91B6B5;
    margin-left: -50vw;
	z-index: 1;
}

.genkan{
	position: absolute;
	top:20px;
	left:0;
	right: 0;
}



.photo04 {
  	width: 100%;
	max-width: 750px;
  	animation: poyopoyo 2s ease-out infinite;
  	opacity: 1;
	margin: 0 auto;
}

@keyframes poyopoyo {
  50%, 70% {
    transform: scale(0.95);
  }
}


.creditr01{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #ffa400;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr01 a{
	color: #ffa400;
}

.creditr01 p{
	color: #ffa400;
}

.creditr02{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #86807e;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr02 a{
	color: #86807e;
}

.creditr02 p{
	color: #86807e;
}

.creditr03{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #ff8800;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr03 a{
	color: #ff8800;
}

.creditr03 p{
	color: #ff8800;
}

.creditr04{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #f79439;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr04 a{
	color: #f79439;
}

.creditr04 p{
	color: #f79439;
}


.creditr05{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #ff7e00;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr05 a{
	color: #ff7e00;
}

.creditr05 p{
	color: #ff7e00;
}


.creditr06{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #dd5036;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr06 a{
	color: #dd5036;
}

.creditr06 p{
	color: #dd5036;
}


.creditr07{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #28aac8;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr07 a{
	color: #28aac8;
}

.creditr07 p{
	color: #28aac8;
}

.creditr08{
	margin: 0 auto;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #ff8800;
	text-decoration: none;
	font-family: "arno-pro-caption", serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr08 a{
	color: #ff8800;
}

.creditr08 p{
	color: #ff8800;
}



.photo05 {
  	width: 100%;
	max-width: 750px;
	margin: 0 auto ;
	padding-top: 50px;
}

.photo06 {
  	width: 100%;
	max-width: 750px;
	margin: 0 auto ;
	padding-top: 50px;
	padding-bottom: 50px;
}


.contents{
	display: flex;
	width: 600px;
	margin: auto;
}


.contents_box{
	display:block;
	width: 100%;
	max-width: 600px;
	background-color:rgba(255,255,255,1);
}


.mordalicon{
	position: fixed;
	display: block;
	text-align: center;
	top:150px;
 	left: 50px;
	width: 600px;
	z-index: 20;	
}

.mordalicon img{
	width: 100%;
}

.overflow{
	overflow:hidden;	
	}


/* ローディング画面背景 */
.loader-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fed440;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ローディングアニメーション */
.loader {
  	width: 200px;
	margin: 50px auto;

}


/* AW02追加 */

.top-box {
    position: relative;
}


.photo07 {
  	width: 100vw;
	max-width: 550px;
  	animation: poyoyon3 2.5s infinite;
  	opacity: 1;
	margin: 0 auto;
}

@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev
.slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}

.slide-img img{
  position: static;
  height: 1040px; /* 全画面表示 */
  object-fit: cover;
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


.titleaw02{
  position:absolute;
  display: block;
  width: 60%;
  max-width: 500px;
  top:8%;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 29;
  }

.toplead{
  position:absolute;
  display: block;
  width: 30%;
  max-width: 300px;
  bottom:10%;
  left: 5%;
  z-index: 29;
  }


.kao_icon{
	 width: 100%;
	 display: flex;
	flex-wrap: wrap;
	gap: 0% 0%;
	list-style-type:none;
}

.flex-item {
  width: 50%;
}

.flex-item2 {
  width: 33.3333%;
}

.flex-item4 {
  width: 35%;
}

.flex-item5 {
  width: 65%;
}




/* HSFSS23 追加 */

.bg01{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #4a7399;	
}

.bg02{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #f46568;	
}

.bg03{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #ffdeb7;	
}

.bg04{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #439dc7;	
}

.bg05{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #cfa9ce;	
}

.bg06{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #a8cae2;	
}

.bg07{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #ffdc6e;	
}

.bg08{
	padding-top: 80px;
	padding-bottom: 20px;
	background-color: #8d7487;	
}

.bg09{
	padding-top: 80px;
	padding-bottom: 40px;
	background-color: #eb7b00;	
}

.textl90{
	transform: rotate(270deg)
}

.textr90{
	transform: rotate(90deg)
}


#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
} 





/* SP */


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


	
.contents{
	display: flex;
	width: 100%;
	padding-left:0px;
	padding-right:0px;
}


.contents_box{
	position: absolute;
	display:block;	
}
	
.mordalicon{
	display: none;
}
	
	
.pc { display: none !important; }
    .sp { display: block !important; }

.top-box {
	width: 100vw;
	height: 100vh;
	margin-bottom: 0px;
	z-index: 25;
}
	
.slide-img img{
  position: static;
  height: 100vh; /* 全画面表示 */
  object-fit: cover;
}
	
.titleaw02{
  width: 65%;
  top:5%;
  }
	
.toplead{
  width: 60%;
  bottom:10%;
  left: 5%;
  }
	
.credit001{
	padding:320px 50px;
}
	
.fade-img-box01 {
 width: 90%;
 height: 550px;
}
	
.fade-img-box02 {
 width: 90%;
 height: 550px;
}

.fade-img-box03 {
 width: 90%;
 height: 550px;
}
	
.fade-img-box04 {
 width: 90%;
 height: 550px;
}
	
.fade-img-box05 {
 width: 90%;
 height: 550px;
}
	
.fade-img-box06 {
 width: 90%;
 height: 550px;
}
	
.fade-img-box07 {
 width: 90%;
 height: 550px;
}
	
.fade-img-box08 {
 width: 90%;
 height: 550px;
}
	
.text001{
	transform-origin: 30% 70%;
	font-size: 40px;
}
	
.parent_box {
  width: 90vw;
}
	
.credit002{
	margin-top: 250px;
}
	
.credit003{
	padding:0px;
}
	
body{
	 overflow-x: hidden!important;
}
	
	
}








/* PC */

@media screen and ( min-width : 750px ){
	
body{
}


	
.itemall{
	width: 600px;
	margin-top: 30px;
	margin-bottom: 20px;
}
	
.sweatbase{
	height: 700px;
}
	
.bgcolor01{
    width: 600px;
    height: 3150px;
	top: 0;
    left: 0;
	margin-left: 0;
}
	
.creditbox03{
	padding-top: 45%;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 30px;
	width: 200px;
}

	
.pr{
	height: 750px;
}
	
.hello{
	top:500px;
}

	
	

	
}