body { font-family: "メイリオ", "Osaka", Arial, Sans-Serif; background:#000000; overflow-y:scroll; }
html, body { height: 100%; }

#clearfix:after,.clearfix:after { content: "."; clear: both; height: 0; display: block; visibility: hidden; }
		#clearfix,.clearfix { display: inline-block; }
		#clearfix,.clearfix { display: block; }

* { box-sizing:border-box; }



/*ロード画面*/
#loader-bg { width: 100%; height:100%; display: none; position: fixed; top: 0px; left: 0px; background: #FFFFFF; z-index:1000; }
#loader { display: none; position: fixed; top: 50%; left: 50%; width: 200px; height: 220px; margin-top: -100px; margin-left: -100px; text-align: center; color: #333333; z-index: 1002; }
#loader img { width:200px; }

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

	#loader img { width:60%; }
}


/*……………………………BASS h1……………………………*/

h1,h3,h4 { font-family: 'gothic'; }

h1 { color:#FFF; font-size:34px; line-height:1.4em; text-align:center; margin:0px 0px 5px 0px; text-shadow: 0px 0px 26px rgba(150, 150, 150, 1); }
h2 { font-family: 'Allerta', sans-serif; font-size:16px; display:inline; border-bottom:#FFF 2px solid; padding:3px; letter-spacing:2px; opacity:0; }
h3 { font-size:40px; }
h4 { font-size:16px; padding:15px 0px; line-height:1.5em; opacity:0; }


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

	h1 { font-size:28px; }
}

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

	h1 { font-size:23px; }
	h3 { font-size:25px; }
}

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

	h1 { font-size:22px; width:85%; margin:0 auto 10px auto; }
	h1 br { display:none; }
	h2 { font-size:11px; }
	h3 { font-size:20px; }
	h4 { font-size:12px; padding:5px 0px; }
}

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

	h1 { font-size:17px; }
	h3 { font-size:18px; }
}

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

	h1 {  font-size:16px; }
	h2 { font-size:10px; }
	h3 { font-size:16px; }
}


/*……………………………MAIN COMMON PARTS……………………………*/

div#container p,div#container ul,div#container dl,div.btn a,table { font-family: 'gothic'; font-size:20px; }

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

	div#container p,div#container ul,div#container dl,div.btn a,table { font-size:18px; }
}

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

	div#container p,div#container ul,div#container dl,div.btn a,table { font-size:16px; }
}

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

	div#container p,div#container ul,div#container dl,div.btn a,table { font-size:14px; }
}

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

	div#container p,div#container ul,div#container dl,div.btn a,table { font-size:12px; }
}


div#container { width: 100%; height:100%; z-index: 10; position: relative; }
div.section { width: 100%; z-index: 10; position: relative;  }

div.cover { width:95%; max-width: 1000px; margin: auto; position: relative; }
div.cover:after { content: ""; display: table; clear: both; }

div#container p { line-height:1.5em; }

/*ボタン*/
div.btn { opacity:0; }
div.btn a { background:url(../img/icon/right.svg) no-repeat left center; background-size:40px 40px; padding:10px 0px 10px 25px; }

	/*……IE……*/
	.ie8 div.btn a { background:url(../img/icon/right.png) no-repeat left center; }
	.ie9 div.btn a { background:url(../img/icon/right.png) no-repeat left center; }


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

	div.btn a { background:url(../img/icon/right.svg) no-repeat left center; background-size:30px 30px; padding:10px 0px 10px 20px; }
}

.lp_btn a{
	background: linear-gradient(to bottom,#fbfbfb,#e1e1e1);
	color: #111;
	padding: 20px;
	width: 240px;
	display: inline-block;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.3);	
	text-align: center;
	text-shadow: 0 1px 1px #fff;
	border-radius: 6px;
	border: 1px solid #777;
}
.lp_btn a:hover{
	opacity: 0.5;
}
.kv_posi{
	position: absolute;
	bottom: 30px;
	width: 100%;
}

@media only screen and (max-width: 780px){
	.kv_posi{
		bottom: 20px;
	}
}

@media only screen and (max-width: 480px){
	.bg_w_btn a{
		font-size: 12px;
	}
}

/*……………………………MENU……………………………*/

nav { width:95%; max-width:1000px; margin:auto; border-bottom:#FFF 1px solid; }

		nav div.cover { background:url(../img/logo_sf_w.svg) no-repeat left center; background-size:200px; }

	nav ul { width:70%; max-width:500px; display:table; table-layout:auto; float:right; padding:40px 0px; }
	nav ul li { display:table-cell; text-align:right; font-family: 'Allerta', sans-serif; letter-spacing:2px;  vertical-align:middle; }

	nav div.cover ul li a { width:100%; height:100%; color:#FFF; display: block; font-size:12px; padding:10px 0px; }
	nav div.cover ul li a:hover { color:#000; transition: 0.5s; }

	/*……IE……*/
	.ie8 nav div.cover { background:url(../img/logo_sf_w_ie.png) no-repeat left center; }
	.ie9 nav div.cover { background:url(../img/logo_sf_w_ie.png) no-repeat left center; }


#ico_nav { width:100%; z-index:1000; height:50px; }

	#ico_nav div.inner { width:100%; margin:auto; z-index:1000; background:#000; }

	#ico_nav ul { width:70%; max-width:500px; margin:auto; display:table; table-layout:fixed; }
	#ico_nav ul li { display:table-cell; text-align:center; font-family: 'Allerta', sans-serif; letter-spacing:2px;  vertical-align:middle; }
	#ico_nav ul li img { width:30px; height:30px; }

	#ico_nav ul li a { width:100%; height:100%; display: block; color:#FFF; font-size:12px; padding:10px 0px; border-top:#000 3px solid; }
	#ico_nav ul li a:hover { transition: 0.5s; opacity:0.5; }

	/*位置fix*/
	#ico_nav ul li a.active { border-top:#FFF 3px solid!important; }
	#ico_nav ul li a.active:hover { color:#000; }


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

	nav div.cover { height:70px; background:url(../img/logo_sf_w.svg) no-repeat center center; background-size:150px; }
	nav ul { display:none; }
}

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

	#ico_nav ul { width:90%; }
	nav div.cover { height:80px; }
}

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

	nav div.cover { height:60px; background:url(../img/logo_sf_w.svg) no-repeat center center; background-size:100px; }
}


/*……………………………MAIN BOX……………………………*/

#container > div { background-repeat:no-repeat; background-position:50% 0%; background-attachment:fixed; background-size:cover; }

		div.first { background-image:url(../img/bg/top.jpg); }
		div.box2 { background-image:url(../img/bg/messege.svg); }
		div.box3 { background-image:url(../img/bg/service.jpg); }
		div.appeal { background-image:url(../img/bg/appeal.jpg); background-color:#000000; }
		div.box4 { background-image:url(../img/bg/company.jpg); }
		div.box6 { background-image:url(../img/bg/contact.jpg); }

	/*……IE……*/
	.ie8 div.box2 { background-image:url(../img/bg/messege_ie.gif); background-color:#000000; }
	.ie9 div.box2 { background-image:url(../img/bg/messege_ie.gif); background-color:#000000; }

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

	#container > div { background-position:50% 0%!important; background-attachment:scroll; }
}


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

	div.first { background-image:url(../img/bg/top_sp.jpg); }
	div.box3 { background-image:url(../img/bg/service_sp.jpg); }
	div.box6 { background-image:url(../img/bg/contact_sp.jpg); background-color: #cacaca; background-size:100%!important; }
}

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

	div.appeal { background-image:url(../img/bg/appeal_sp.jpg); }
}


/*……………………………FOOTER……………………………*/

div#container footer { width:100%; background:#000000; color:#FFF; text-align:center; padding:20px 0px 100px 0px; }
div#container footer p { font-size:12px; }


/*……………………………Top……………………………*/

div.first { height:100%; z-index: 1; text-align:center; }

		div.first div.detail { width:100%; margin:auto; padding:80px 10px 160px; }
		div.first div.detail h2 { opacity:1; border:none; font-family: 'gothic'; letter-spacing:normal; color:#FFF; text-shadow: 0px 0px 26px rgba(150, 150, 150, 1); }
		div.first div.detail h1 span { padding:0 3px; }
		div.first div.detail p { color:#FFF; letter-spacing:1px; }

		div.first div.news { width:100%; position:absolute; padding:10px 0px; bottom:100px; left:0; right:0;  }

			div.first ul#news { width:85%; max-width:1000px; margin:auto; }
			div.first ul#news li { color:#FFF; font-size:12px; }
			div.first ul#news.js-loading li { display: none; }
			div.first ul#news.js-loading li:first-child { display: block; }

				div.first ul#news li dl { margin:5px 0px; }
				div.first ul#news li dt { font-size:20px; line-height:1.2em; padding:0px 0px 5px 0px; }
				div.first ul#news li dt span { font-size:12px; }
				div.first ul#news li dd { font-size:12px;  line-height:1.4em; padding:0px 0px 5px 0px; }

						div#container div.first ul#news li dl { font-family: "メイリオ", "Osaka", Arial, Sans-Serif; text-shadow: 0px 0px 26px rgba(150, 150, 150, 1); }
						div#container div.first ul#news li dl dt a{ color:#FFF; text-decoration:none; }
						div#container div.first ul#news li dl dt a:hover{ text-decoration:underline; transition: 0.5s; color:#FFF; }

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

		div.first ul#news li dt { font-size:18px; }
		div.first ul#news li dd { font-size:12px; }
	}

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

		div.first { height:auto; }
		div.first div.detail { position:relative; bottom: 20px; padding: 60px 10px 40px;}
		div.first div.news { position:relative; bottom: 20px; padding: 20px 10px 80px;}
		div.first ul#news li dt { font-size:16px; }
	}

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

		div.first ul#news li dt { font-size:12px; }
		div.first ul#news li dd { display:none; }
	}

	@media screen and (min-width: 320px) {
	div.first div.detail h2 br { display:none; }
	}

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

		div.first div.detail { padding:110px 0px 50px 0px; }
		div.first div.detail dl.copy dt { font-size:16px; }
		div.first div.detail,div.first div.news { position:relative; bottom: 20px; padding: 60px 10px 30px;}

	}


/*……………………………Message……………………………*/

div.box2 { height: 750px; z-index: 1; padding:50px 0px; }

		div.box2 div.detail { width:80%; max-width:1000px; position:absolute; top:30%; left:0; right:0; margin:auto; color:#FFF; text-align:center; }

		/*エフェクト*/
		div.box2 div.detail h3 { opacity: 0; margin:20px auto 0 auto; line-height:1.4em; width:85%; }
		div.box2 div.detail p { opacity: 0; width:80%; max-width:600px; margin:50px auto 0 auto; }
		div.box2 div.detail p span { padding:20px 0 0 0; }

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

	div.box2 { height: auto; padding:100px 0px 50px 0px; }
	div.box2 div.detail { width:90%; position:relative; }
	div.box2 div.detail p { margin:25px auto 0 auto; }
	div.box2 div.detail p br { display:none; }
	div.box2 div.detail p span { display:block; }
}


/*……………………………board……………………………*/

div.board { height: auto; z-index: 1; padding:100px 0px; background: url(../img/board/bg.jpg) no-repeat center bottom;}

		div.board div.detail { width:80%; max-width:1000px; margin:auto; color:#FFF; text-align:center; }

		div.board div.detail div.btn a { background:url(../img/icon/right_w.svg) no-repeat left center; background-size:40px 40px; color:#FFF; }
		div.board div.detail div.btn a:hover { transition: 0.2s; color: #5c6592; }

		/*エフェクト*/
		div.board div.detail h2 { opacity: 0; border-bottom: none; width: 80%; max-width: 550px !important; height: auto; }
		div.board div.detail h2 img { width: 100%; max-width: 550px !important; margin: auto; padding: 0 0 50px 0; }
		div.board div.detail h3 { color: #5c6592; opacity: 0; }
		div.board div.detail h4 { width: 80%; font-size: 14px; opacity: 0; font-weight: bold; max-width: 600px; padding: 30px 0 0 0; margin: auto; text-align: left; }
		div.board div.detail p { width: 80%; max-width: 600px; margin: auto; opacity: 0; font-size: 12px !important; text-align: left; padding: 5px 0; }


		div.board div.detail ol { width:85%; text-align: left; max-width: 600px; opacity: 0; margin: auto; padding: 5px 0 0 0; }
		div.board div.detail ol li { font-family: 'gothic'; padding: 0 10px 0 0; font-size: 11px; display: inline; line-height: 1.5em; text-align: left; }

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

	div.board { height: auto; padding:50px 0px; }
	div.board div.detail { width:90%; }
}

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

	div.board div.detail h2 img { padding: 0 0 25px 0; }
	div.board div.detail h3 { padding: 0; margin: 0; }
	div.board div.detail h4 { padding: 10px 0 0 0; }
	div.board div.detail p { padding: 5px 0 15px 0; }
}


/*……………………………Service……………………………*/

div.box3 { height: 900px; z-index: 1; }

	div.box3 div.inner1 { width:50%; height:100%; float:left; background:#FFF; padding:80px; }

			div.box3 div.inner1 h2 { border-bottom:#000000 2px solid; }
			div.box3 div.inner1 h3 { opacity: 0; margin:40px auto 0 auto; font-size:18px; line-height:1.4em; }
			div.box3 div.inner1 h3 span { display:block; padding:10px 0; font-size:14px; }
			div.box3 div.inner1 h3 img { width:250px; margin:10px 0px 0px 0px; }
			div.box3 div.inner1 p { opacity: 0; margin:20px auto; }

			div.box3 div.inner2 { width:50%; height:100%; float:left; }

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

	div.box3 div.inner1 { padding:80px 40px; }
}

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

	div.box3 div.inner1,div.box3 div.inner2 { width:50%; }
}

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

	div.box3 div.inner1 { width:90%; background:none; margin:auto; height:auto; float:none; text-align:center; padding:150px 0px 50px 0px; text-shadow: 0px 0px 15px rgba(255, 255, 255, 1); }
	div.box3 div.inner1 h3 { opacity: 0; margin:20px auto 0 auto;; width:85%; }
	div.box3 div.inner1 p { margin:20px auto; max-width:600px; width:85%; }
	div.box3 div.inner2 { display:none; }
}

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

	div.box3 { height: auto; }
	div.box3 div.inner1 { padding:80px 0px 80px 0px; }
	div.box3 div.inner1 h3 { font-size:12px; }
	div.box3 div.inner1 h3 img { width:150px; }
}


/*……………………………自動入札ツール 国内導入件数No.1……………………………*/

div.appeal { padding:120px 0; z-index: 1; }

	div.appeal ul.detail { width:100%; max-width:1400px; margin:auto; text-align:center; }
	div.appeal ul.detail li { display:inline-block; vertical-align:middle; text-align:center; }

		div.appeal ul.detail li.image { width:40%; }
		div.appeal ul.detail li.text { width:55%; }

		div.appeal ul.detail li img { width:80%; max-width:450px; opacity: 0; }
		div.appeal ul.detail li h2 { border-bottom:none; font-family: 'gothic'; font-size:120px; color:#c4b877; text-decoration:none; padding:0 30px 0 50px;
				background-image:url(../img/section/bg_ttl_1.png),url(../img/section/bg_ttl_2.png);
				background-repeat:no-repeat, no-repeat;
				background-size:25px, 25px;
				background-position:left 70%, right 70%;
		 }

		div.appeal ul.detail li h3 { opacity: 0; line-height:1.4em; color:#c4b877; display:inline-block; padding:15px 30px; font-size:28px; border-bottom:#c4b877 1px solid; }
		div.appeal ul.detail li p { opacity: 0; margin:25px auto; color:#FFF; width:75%; max-width:550px; }
		div.appeal ul.detail li div.btn a { background:url(../img/icon/right_w.svg) no-repeat left center; background-size:40px 40px; color:#FFF; font-size:14px; }
		div.appeal ul.detail li div.btn a:hover { transition: 0.2s; color:#c4b877; }

			div.appeal ul.detail li div.btn a br { display:none; }


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

		div.appeal ul.detail li p { width:90%; }
}


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

		div.appeal ul.detail li h2 { font-size:80px; padding:0 15px 0 35px;
				background-size:15px, 15px;
		}

		div.appeal ul.detail li h3 { font-size:20px; }
		div.appeal ul.detail li div.btn a { color:#FFF; font-size:12px; }
		div.appeal ul.detail li div.btn a br { display:inherit; }
}

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

	div.appeal { padding:70px 0; }
	div.appeal ul.detail li.image { width:90%; padding:0 0 20px 0; }
	div.appeal ul.detail li.text { width:90%; }

	div.appeal ul.detail li img { width:60%; max-width:280px; }
}

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

	div.appeal ul.detail li h2 { font-size:60px; padding:0 15px 0 25px;
				background-size:10px, 10px;
	}
	div.appeal ul.detail li h3 { padding:5px 15px 15px 15px; font-size:18px; }
	div.appeal ul.detail li div.btn a { font-size:10px; }
	div.appeal ul.detail li p { margin:20px auto; }
}



/*……………………………Company……………………………*/

div.box4 { padding:350px 0px 0px 0px; text-align:center; }

	div.box4 h2 { border-bottom:#000000 2px solid; }

		div.box4 div.inner { width:100%; background:url(../img/bg/company_box.png) repeat-x center top; background-size:1600px; margin:30px 0px 0px 0px; padding:300px 0px 50px 0px; }

			div.box4 div.inner h3 { color:#FFF; opacity:0;  }
			div.box4 div.inner table { width:90%; max-width:600px; font-size:95%; margin:20px auto 0px auto; color:#FFF; padding:0px; opacity:0; }
			div.box4 div.inner table { line-height:1.5em; }
			div.box4 div.inner table a { color: #FFF; }

	/*……IE……*/
	.ie9 div.box4 div.inner { background:url(../img/bg/company_box_ie.png) no-repeat center top; background-size:100%; }
	.ie8 div.box4 div.inner { background:#b0b0b0; padding:50px 0px 0px 0px;  }


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

	div.box4 { padding:200px 0px 0px 0px; }
}

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

	div.box4 div.inner { padding:200px 0px 50px 0px; }
	div.box4 div.inner { background:url(../img/bg/company_box.png) no-repeat center top; background-size:1000px; }
}

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

	div.box4 div.inner { padding:150px 0px 50px 0px; background:url(../img/bg/company_box.png) no-repeat center top; background-size:780px; }
}

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

	div.box4 { padding:100px 0px 0px 0px; }
	div.box4 div.inner table { font-size:12px; }
}

div.box4 div.inner { min-width: 1000px; }

    div.box4 div.company-info { width: 50%; float: left; padding: 0 10px 0 0px; }
    div.box4 div.company-info h3 { float: right; width: 600px; }
    div.box4 div.company-info table { float: right; text-align: center; }

    div.box4 div.company-feeds { width: 50% ; float: left; text-align: left; padding: 0 40px 0 10px; }
    div.box4 div.company-feeds iframe { width: 100%; }

    @media only screen and ( max-width: 1000px)  {
        div.box4 div.inner { min-width: auto; }

        div.box4 div.company-info { float: none; width: 100%; padding: 0; }
        div.box4 div.company-info table { float: none; text-align: center; }
        div.box4 div.company-info h3 { float: none; width: auto; }

        div.box4 div.company-feeds { float: none; width: 100%; margin-top: 40px; padding: 0 20px;}
}

/*……………………………Acceess……………………………*/

div.box5 { height:600px; background:#fff; }

	div.box5 h2 { opacity:1; border-bottom:#000000 2px solid; }
	div.box5 div.inner1 { width:65%; height:100%; float:left; }
	div.box5 div.inner2 { width:35%; height:100%; float:left; text-align:center; padding:80px 0px 0px 0px; }

			div.box5 div.inner2 img { width:90px; height:90px; display:block; margin:50px auto 30px auto; }
			div.box5 div.inner2 dt { font-size:40px; padding:10px 0px; }
			div.box5 div.inner2 dd { padding:20px 0px; }


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

	div.box5 { height:500px; }
	div.box5 div.inner1 { width:50%; }
	div.box5 div.inner2 { width:50%; padding:50px 0px 0px 0px; }
	div.box5 div.inner2 img { width:80px; height:80px; margin:40px auto 20px auto; }
}

@media only screen and (max-width: 780px)  {
	div.box5 { height:auto; }
	div.box5 div.inner1 { width:100%; height:200px; float:none; }
	div.box5 div.inner2 { width:100%; float:none; }
	div.box5 div.inner2 dt { font-size:30px; padding:7px 0px; }
}

@media only screen and (max-width: 480px)  {
	div.box5 div.inner2 { opacity:0; }
	div.box5 div.inner2 img { width:50px; height:50px; margin:20px auto; }
	div.box5 div.inner2 dt { font-size:20px;  padding:5px 0px; }
}

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

	div.box5 div.inner2 dt { font-size:16px; }
}


/*……………………………Contact……………………………*/

div.box6 { padding:200px 0px 0px 0px; }

	div.box6 div.cover { text-align:center; }
	div.box6 h2 { border-bottom:#000000 2px solid; }
	div.box6 img { width:90px; height:90px; display:block; margin:50px auto 30px auto; }

		div.box6 p { color:#000000; padding:20px 0px; }

				div.box6 p.click { border-top:#000000 1px solid; border-bottom:#000000 1px solid; margin-top:30px; }
				div.box6 p.button { cursor:pointer; display:block; width:100%; height:100%; }

					div#container div.box6 div.detail_open { border:none; font-size:12px; padding:50px 0px 0px 0px; }
					div#container div.box6 div.detail_open h3 { font-size:20px; }
					div#container div.box6 div.detail_open p { width:90%; max-width:700px; margin:auto; border:none; font-size:12px; text-align:left; text-shadow: 0px 0px 15px rgba(255, 255, 255, 1); }

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

	div.box6 img { width:80px; height:80px; display:block; margin:40px auto 20px auto; }
}

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

	div.box6 { padding:150px 0px 0px 0px; }
}

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

	div.box6 { padding:100px 0px 0px 0px; }
}

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

	div.box6 { padding:50px 0px 0px 0px; }
	div.box6 h2 { opacity:1; }
	div.box6 img { width:50px; height:50px; margin:20px auto; }
	div.box6 p { padding:10px 0px; }
	div#container div.box6 div.detail_open h3 { font-size:14px; }
}


/*……………………………PARTS SETTING……………………………*/

/*スクロールアイコン*/
div.mouse { padding:5px; position:relative; font-family: 'gothic'; margin:60px auto; }
div.mouse p.txt { margin-top:70px; color:#FFF; font-size:20px; }

p.scroll span { width: 40px; height: 60px; position: absolute; top: 0px; left: 50%; margin-left: -20px; border: 2px solid #fff; border-radius: 50px; box-sizing: border-box; }

		p.scroll span::before { width: 6px; height: 6px; position: absolute; top: 10px; left: 50%; content: ''; margin-left: -3px; background-color: #fff; border-radius: 100%; -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; box-sizing: border-box; }

	@-webkit-keyframes sdb {

		0% { -webkit-transform: translate(0, 0); opacity: 0; }
		40% { opacity: 1; }
		80% { -webkit-transform: translate(0, 20px); opacity: 0; }
		100% { opacity: 0; }
	}

	@keyframes sdb {

		0% { transform: translate(0, 0); opacity: 0; }
		40% { opacity: 1; }
		80% { transform: translate(0, 20px); opacity: 0; }
		100% { opacity: 0; }
	}
	@media only screen and (max-width: 780px)  {
		div.mouse { display:none; }

	}
	@media only screen and (max-height: 680px) {

		div.mouse { display:none; }
	}


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

		div.mouse { display:none; }
	}


/*……………………………google map……………………………*/

div#map { position: relative; height:100%; overflow: hidden; opacity:0; }

		div#map iframe,div#map object,div#map embed { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }