@charset "UTF-8";

/* ------------------------------
	Contents
------------------------------ */

* {
	margin: 0;
	padding: 0;
}

body,
.wrapper {
}

/* ------------------------------
	hero
------------------------------ */

@media screen and (min-width: 751px), print {
	#hero {
		display: block;
		width: 100%;
		height: 1000px;
		background: rgba(0,0,0,0.3);
	}
	
	#hero .content_area {
		margin: 0 auto;
		height: 0;
	}
	
	#site_logo {
		display: block;
		width: 532px;
		height: 617px;
		text-indent: -9999px;
		background: url(../common/images/logo.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 5px;
		right: 0;
		left: 0;
		margin: auto;
	}
	#virtual {
		display: block;
		width: 200px;
		height: 142px;
		text-indent: -9999px;
		background: url(../common/images/virtual.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 230px;
		left: 205px;
		margin: auto;
	}
	
	.logo_shoo {
		display: block;
		width: 257px;
		height: 166px;
		position: absolute;
		top: 14px;
		left: 15px;
	}
	
	.logo_shoo a {
		display: block;
		width: 257px;
		height: 166px;
		text-indent: -9999px;
		background: url(../common/images/logo_shoo.png) no-repeat;
		background-size: contain;
	}
	
	.goggles {
		width: 106px;
		height: 64px;
		text-indent: -9999px;
		background: url(../images/main_visual/goggles.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 495px;
		right: 282px;
		z-index: 100;
	}
	.mascot {
		width: 295px;
		height: 249px;
		text-indent: -9999px;
		background: url(../images/main_visual/mascot.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 421px;
		right: 240px;
	}	

	/* ticker */
	#news_area {
		width: 950px;
		height: 50px;
		position: absolute;
		top: 790px;
		left: 112px;
		background-color:rgba(0,0,0,0.5);
	}
	
	#news_contents {
		display: block;
		height: 50px;
		margin: 0;
		padding-top: 17px;
		box-sizing: border-box;
	}
	
	#news_area #news_title_wrap {
		height: 50px;
	}

	#news_area #news_title {
		width: 101px;	
		height: 30px;
		font-size: 16px;
		color: #111;
		letter-spacing: 0;
		text-align: center;
		vertical-align: middle;
		line-height: 30px;
		background: #fff;
		position: absolute;
		top: 10px;
		left: 10px;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	#news_area #news_contents_wrap {
		width: 721px;
		height: 50px;
		line-height: 1;
		position: absolute;
		top: 0;
		left: 120px;
		overflow: hidden;
	}
			
	#news_contents ul {
		margin: 0;
		font-size: 16px;
		position: relative;
	}
	
	#news_contents ul:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#news_contents ul li {
		width: 100%;
		color: #fff;
		display: none;
		z-index: 100;
	}
	
	#news_contents li span {
		width: 105px;
		margin-right: 15px;
		margin-left: 18px;
	}
	
	#news_area .sns_link {
		width: 70px;
		position: absolute;
		top: 11px;
		right: 16px;
	}
	
	#news_area .sns_link li {
		float: left;
		width: 30px;
		height: 30px;
		margin-left: 9px;
	}
	
	#news_area .sns_link li:first-child {
		margin-left: 0;
	}
	
	#news_area .sns_link li a:hover {
		opacity: 0.65;
	}
	

}

	
 @media screen and (max-width: 750px) {
	
	#hero {
		padding-bottom: 17px;
		overflow: hidden;
	}

	#hero:after,
	#hero .content_area:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#hero .content_area {
		margin: 0 auto;
		display: block;
		width: 100%;
		height: 0;
		padding-top: 119%;
		position: relative;
	}
	
	#site_logo {
		display: block;
		width: 60.1%;
		height: 63.14%;
		margin: 0;
		text-indent: -9999px;
		background: url(../common/images/logo.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 3.033%;
		left: 20.1%;
	}
	 #virtual {
		display: block;
		width: 30%;
		height: 30%;
		margin: 0;
		text-indent: -9999px;
		background: url(../common/images/virtual.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 10%;
		left: 8%;
	}
	.goggles {
		width: 106px;
		height: 64px;
		text-indent: -9999px;
		background: url(../images/main_visual/goggles.png) no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 16%;
		right: 8.5%;
		z-index: 100;
	}

	.mascot {
		width: 22.1%;
		height: 29.1%;
		text-indent: -9999px;
		background: url(../images/main_visual/mascot_sp.png) no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 0%;
		right: 5%;
	}
	
	.mascot:after {
		content: "";
		display: block;
		clear: both;
	}
	

	/* ticker */
	#news_area {
		display: none;
	}
		
	
}

/* ------------------------------
	sec_message
------------------------------ */
@media screen and (min-width: 751px), print {
	#sec_message {
	}
	
	#sec_message .float_mascot {
		background: url(/common/images/kintokun/kintokun_front.png) right 10% bottom 5% no-repeat;
		background-size: 280px auto;
	}
		
} @media screen and (max-width: 750px) {
	#sec_message {
		
	}
	
}

/* ------------------------------
	sec_aboutip
------------------------------ */
@media screen and (min-width: 751px), print {
	#sec_aboutip {
		background: rgba(255,255,255,0.9);
	}
	
	#sec_aboutip .float_mascot {
		background: url(/common/images/kintokun/kintokun_jump.png) left 5% bottom 5% no-repeat;
		background-size: 280px auto;
		padding-bottom: 50px;
	}
		
} @media screen and (max-width: 750px) {
	#sec_aboutip {
		background: rgba(255,255,255,0.9);		
	}
	
}

/* ------------------------------
	sec_allcompany
------------------------------ */
@media screen and (min-width: 751px), print {
	#sec_allcompany {
		margin: 0!important;
		padding: 0!important;
		padding-bottom: 60px!important;
	}
		
} @media screen and (max-width: 750px) {
	#sec_allcompany {
		padding-bottom: 30px!important;
		
	}
	
}

/* ------------------------------
	sec_info
------------------------------ */
@media screen and (min-width: 751px), print {
	#sec_info {
		background: rgba(0,0,0,0.7);
	}
	#sec_info ul.infolist {
		margin-bottom: 30px;
	}
	#sec_info ul.infolist li {
		color: #fff;
		background: url(/common/module/border/border_dotx.png) repeat-x center bottom;
	
	}
		
} @media screen and (max-width: 750px) {
	#sec_info {
		background: rgba(0,0,0,0.7);		
	}
	#sec_info ul.infolist {
		margin-bottom: 30px;
	}
	#sec_info ul.infolist li {
		color: #fff;
		background: url(/common/module/border/border_dotx.png) repeat-x center bottom;
		margin-bottom: 0.5em;
		padding-bottom: 0.5em;
	
	}
	
}

