@charset "utf-8";

/* rewrite
------------------------------------------------------------------------- */

#header {
	margin-bottom:0px !important;
}

/* basic
------------------------------------------------------------------------- */

body {
	margin:0;
	padding:0;
}

img {
	border: 0;
}

p, form, ul, li, dl, dt, dd, ol, div, img, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

/* link default */
a:link				{ color: #FFFFFF; text-decoration: none; }
a:visited			{ color: #FFFFFF; text-decoration: none; }
a:hover				{ color: #FFFFFF; text-decoration: underline; }
a:active			{ color: #FFFFFF; text-decoration: underline; }

.clearfix:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}



/* contents
------------------------------------------------------------------------- */

#wrap {
	background:url(../img/bg.png) left top;
}

#contents {
	font-family: sans-serif;
	max-width:904px;
	margin:0 auto;
	padding:0 0 26px 0;
}

/* head */
#head {
	background:url(../img/headerBg.png) center bottom no-repeat;
	height:272px;
	margin:0 0 10px 0;
}

/* title */
#head h1 {
	margin:0 0 30px 0;
	padding:29px 0 0 0;
	text-align:center;
}

#head h1 img{
	max-width: 887px;
	width: 100%;
	height: inherit;
}
/* share */
#head #share {
	max-width:872px;
	height:inherit;
	margin:0 0 20px 17px;
	position:relative;
	list-style:none;
}

#head #share li {
	display: inline-block;
	text-align: right;
	width:31%;
	margin-right: 2%;
	height:inherit;
	position:absolute;
	top:0;
}

#head #share li:last-child{
	margin-right: 0;
}

#head #share li.fb {
	left:0;
	background:url(../img/shareBgFb.png) left top no-repeat;
}

#head #share li.fb iframe {
	margin:21px 0 0 0;
}

#head #share li.tw {
	left:33%;
	background:url(../img/shareBgTw.png) left top no-repeat;
}

#head #share li.tw iframe {
	margin:21px 10px 0 0;
}

#head #share li.mi {
	left:66%;
	background:url(../img/shareBgMi.png) left top no-repeat;
	margin:0;
}

#head #share li.mi iframe {
	margin:21px 10px 0 0;
}

/* check */
#head #check {
	text-align:center;
}

/* checkin */
#checkin {
	max-width:894px;
	width: 100%;
	height:163px;
	background:url(../img/bgCheckin.png) ;
	margin:0 auto 18px auto;
	position:relative;
	background-repeat: no-repeat;
	background-size: 100%;
}

#checkin h2 {
	max-width:661px;
	max-height:86px;
	position:absolute;
	left:10%;
	top:11%;
	right: 20%;
}

#checkin h2 img{
	width: 100%;
	height: inherit;
}

#checkin p.text {
	max-width:342px;
	max-height:21px;
	position:absolute;
	left:25%;
	right: 30%;
	padding-top: 13%;
	padding-bottom: 5%;
}

#checkin p.number {
	max-width:165px;
	position:absolute;
/*	left:70%;*/
	color:#FFF;
	line-height:1;
	padding: 13% 68% 5%;
/*	padding-top: 13%;
	padding-bottom: 5%;*/
}

#checkinCount {
	font-size:32px;
	padding:0 2px 0 0;
	_letter-spacing:-2px;
}

/* widget */
#widget {
	height:630px;
	background:url(../img/widgetBg.png) ;
	padding:0 23px;
	margin:0 0 10px 0;
	background-repeat: no-repeat;
	background-size: contain;
}

#widget .fb {
	width:48%;
	/*float:left;*/
	display: inline-block;
}
	
#widget .tw {
	width:46%;
	margin-left: 3%;
/*	float:right;*/
	display: inline-block;
}

#widget h2 {
	height:55px;
}

#widget h2 img {
	margin:18px 0 0 0;
}

#widget .fb h2 {
	background:url(../img/widgetBgFb.png) right top no-repeat;
}
	
#widget .tw h2 {
	background:url(../img/widgetBgTw.png) right top no-repeat;
}
/*._2p3a{
	width: 100% !important;
}*/
#widget .tw .border {
	border:1px solid #BABABA;
	background-color:#FFF;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}
/* bottom */
#bottom {
	background:url(../img/bottomBg.png) left top no-repeat;
}

/* btn */
#btn {
	max-width:856px;
	width: 100%;
	margin:0 auto 32px auto;
	padding:40px 0 0 0;
}

#btn li {
	max-width:405px;
	width: 44%;
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin:0 3% 0 3%;
}

#btn li img{
	width: 100%;
	height: inherit;
}
#banner {
	width:856px;
	margin:0 auto 28px auto;
}

#banner ul {
	list-style:none;
}

#banner ul li {
	margin:0 0 10px 0;
}

#toTop {
	width:830px;
	margin:0 auto 26px auto;
	text-align:right;
}

@media screen and (max-width:768px) { 
	.grid-wrapper img{
		width: 100%;
		height: inherit;
	}
	.grid .grid-wrapper{
		padding: 0 10px;
	}
	#contents,
	#head #share{
		width: 100%;
	}
	#head{
		height: 200px;
		background-size: cover;
		padding-bottom: 20px;
	}
	#head h1{
		width: 90%;
		margin: 0 auto 30px;
	}
	#head #share{
		margin: 0;
		height: inherit;
	}

	#head #share{
		text-align: center;
	}

	#head #share li.fb iframe {
		margin:20px auto 0 auto;
	}

	#head #share li.tw iframe {
		margin:20px auto 0 auto;
	}

	#head #share li.mi iframe {
		margin:20px auto 0 auto;
	}

	#checkin {
	    width: 100%;
	    height: 0;
	    padding-top: 18%;
	    background-size: cover;
	    margin-top: 20px;
	}
	#checkin h2{
		width: 67%;
		height: 72%;
		top: 11%;
		left: 45%;
	    -webkit-transform: translate(-50%,0);
	    transform: translate(-50%,0);
	}
	#checkin p.text{
		width: 38%;
		height: 37%;
		left: 15%;
		top:73%;
		padding-bottom: 0;
		padding-top: 0;
		max-height: initial;
		max-height: auto;
	}
	#checkin p.number{
		width: 18%;
		left:55%;
		top:68%;
		padding: 0;
	}
	#checkinCount{
		font-size: 12px;
	}
	#widget{
		background: none;
		height: inherit;
		padding: 0 10px;
	}
	#widget .fb,
	#widget .tw{
		width: 96%;
	}
	#widget .tw {
		margin-top: 20px;
	}
	#widget .fb h2,
	#widget .tw h2{
		background: none;
	}
	#widget .fb h2 img{
		width: 134px;
		height: 23px;
	}
	#widget .tw h2 img{
		width: 92px;
		height: 23px;
	}
	#bottom{
		background: none;
	}
	#btn{
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#btn ul{
		margin: 30px 0;
	}
	#btn li{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	#btn li + li{
		margin-top: 10px;
	}
}