@charset "UTF-8";
/* ========================
	Base
======================== */
html{
	font-size: 62.5%;
	font-family: sans-serif;
}
body {
	font-size: 1.2em;
	line-height: 1.4;
	min-width: 320px;
	color: #fff;
}
a {
	color: #fff;
	line-height: 1.4;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a.dotline {
	padding-bottom: 2px;
	border-bottom: 1px dotted #999;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* clearfix */
.clearfix:before,
.clearfix:after {
	content:"";
	display:block;
	overflow:hidden;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	zoom:1;
}

/* ========================
	Layout
======================== */

#wrapper {
	position: relative;
	background-color: #185c72;
	overflow-y: hidden;
}
/* 背景:ハス */
#wrapper .bg-hasu {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(/rabitobi_sp/img/bg-body_hasu.png) repeat-y left top;
	background-size: 100%;
	z-index: 0;
}
/* 背景:昼 */
.time-daytime {
	background: url(/rabitobi_sp/img/bg-body_daytime_repeat.gif) repeat;
}
.time-daytime #wrapper {
	background: url(/rabitobi_sp/img/bg-body_daytime.jpg) no-repeat;
	background-size: 100%;
}

.time-daytime.wallpaper_bg #wrapper{
	background: url(/rabitobi_sp/img/bg-body_daytime_wallpaper.jpg) no-repeat;
	background-size: 100%;
}


/* 背景:夕 */
.time-evening {
	background: url(/rabitobi_sp/img/bg-body_evening_repeat.gif) repeat;
}
.time-evening #wrapper {
	background: url(/rabitobi_sp/img/bg-body_evening.jpg) no-repeat;
	background-size: 100%;
}
/* 背景:夜 */
.time-night {
	background: url(/rabitobi_sp/img/bg-body_night_repeat.gif) repeat;
}
.time-night #wrapper {
	background: url(/rabitobi_sp/img/bg-body_night.jpg) no-repeat;
	background-size: 100%;
}

/* header */
#header {
	position: relative;
	min-height: 320px;
}
	#header .logo {
		position: absolute;
		top: 8px;
		left: 8px;
		width: 18.75%;
	}
	#header .logo a {
		display: block;
	}
	#header .logo img {
		width: 100%;
	}
	#header .social {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 28.13%;
		text-align: right
	}
	#header .social li {
		display: inline-block;
		width: 23.33%;
		margin-left: 15.56%;
	}
	#header .social li.tw {
		width: 26.67%;
		margin-left: 11.11%;
	}
	#header .social li:first-of-type {
		margin-left: 0;
	}
	#header .social a {
		display: block;
	}
	#header .social li img {
		width: 100%;
	}
	#header .site-title {
		width: 100%;
		position: absolute;
		/*top: 50%;*/
		top: 30%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(50%,50%);
		-ms-transform: translate(50%,50%);
		-o-transform: translate(50%,50%);
		transform: translate(-50%,-50%);
	}
	#header .site-title img {
		width: 100%;
	}
	#header .soon {
		width: 100%;
		position: absolute;
		/*top: 50%;*/
		top: 52%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(50%,50%);
		-ms-transform: translate(50%,50%);
		-o-transform: translate(50%,50%);
		transform: translate(-50%,-50%);
		text-align: center;
	}
	
	#header .soon img{
		width: 40%;
	}
	
	#header .global-nav ul {
		position: absolute;
		z-index: 1;
		bottom: 0;
		width: 100%;
		padding: 0 6.25%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#header .global-nav ul li {
		float: left;
		margin-left: 3.5%;
		width: 45%;
	}
	#header .global-nav li:first-of-type {
		margin-left: 0;
	}
	#header .global-nav li:nth-of-type(3) {
		margin-left: 24%;
	}


	#header .global-nav ul li img {
		width: 100%;
		padding-bottom: 3.5%;
	}
	#header .fit-blank img {
		width: 100%;
	}
	
	



/* main */
#main {
	position: relative;
	padding: 0 6.25% 42px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#main.full-width {
	padding: 0;
}
	#main.full-width > .inner {
		padding: 0 6.25%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* footer */
#footer {
	position: relative;
	padding: 0 6.25% 32.5px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
	#footer .btn-image {
		width: 79.68%;
		margin-left: 10.16%;
		margin-right: 10.16%;
	}
	#footer .social {
		margin: 0 auto;
		width: 63.57%;
	}
	#footer .social li {
		float: left;
		width: 21%;
		margin: 0 6%;
	}
	#footer .social li img {
		width: 100%;
	}
	#footer .social li a {
		display: block;
		width: 100%;
	}
	#footer * + .social {
		margin-top: 42px;
	}
	#footer .utility {
		padding-top: 8px;
		border-top: 1px solid rgba(255,255,255,0.15);
	}
	#footer .utility li {
		vertical-align: middle;
	}
	#footer .utility li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 4px 10px;
		font-size: 1.1rem;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#footer .utility.fit-col2 li {
		text-align: left;
		border-left: 1px solid rgba(255,255,255,0.15);
	}
	#footer .utility.fit-col2 li:first-of-type {
		border-left: none;
		text-align: right;
	}
	#footer .utility.fit-col3 li {
		border-left: 1px solid rgba(255,255,255,0.15);
		text-align: center;
	}
	#footer .utility.fit-col3 li:first-of-type {
		border-left: none;
	}

	#footer .utility.fit-col4 li {
		border-left: 1px solid rgba(255,255,255,0.15);
		text-align: center;
	}
	#footer .utility.fit-col4 li:first-of-type {
		border-left: none;
	}

	#footer * + .utility {
		margin-top: 52.5px;
	}
	#footer .copyright {
		margin-top: 10px;
		text-align: center;
		font-size: 1.1rem;
	}

/* ========================
	Module
======================== */
.fit-col2 {
	display: table;
	width: 100%;
	text-align: center
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.fit-col2 li {
	display: table-cell;
	width: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.fit-col3 {
	display: table;
	width: 100%;
	text-align: center
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.fit-col3 li {
	display: table-cell;
	width: 33%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.fit-col4 {
	display: table;
	width: 100%;
	text-align: center
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.fit-col4 li {
	display: table-cell;
	width: 25%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* button base --------------- */
.btn-image {
	display: inline-block;
	width: 100%;
	text-align: center;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
	.btn-image img {
		width: 100%;
	}

/* page-title -------------------------- */
.page-title {
	margin-top: 30px;
	width: 100%;
	text-align: center;
}
	.page-title img {
		width: 100%;
	}

/* box-catch -------------------------- */
.box-catch {
}
	.box-catch .store {
		margin-top: 24px;
		padding: 0 7.03%;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box-catch .store img {
		width: 100%;
	}
	.box-catch .store li {
		float: left;
	}
	.box-catch .store li + li {
		padding-left: 6.56%;
	}
	.box-catch .store .app_store {
		width: 50%;
	}
	.box-catch .store .google_play {
		width: 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box-catch .video {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
	.box-catch .video iframe,
	.box-catch .video object,
	.box-catch .video embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.image img {
		width: 100%;
	}

/* base-unit -------------------------- */
.base-unit {
}
	.base-unit .title {
		font-weight: bold;
	}
	.base-unit .title ~ .title {
		margin-top: 20px;
	}
	.base-unit p {
		margin-top: 12px;
	}

/* news-list -------------------------- */
.news-list {
}
	.news-list dt {
		margin-top: 0px;
		font-size: 1.1rem;
	}
	.news-list dt .tag {
		display: inline-block;
		margin-left: 5px;
		padding: 2px 4px;
		border: 1px solid #fff;
		border-radius: 3px;
		font-size: 1rem;
		line-height: 1;
		vertical-align: middle;
	}
	.news-list dd {
		margin-top: 4px;
	}
	.news-list dd a {
		padding-bottom: 2px;
		border-bottom: 1px dotted  #999;
	}
	.news-list dd a:hover {
		text-decoration: none;
	}
	.news-list dd + dt {
		margin-top: 19px;
	}

/* news-unit -------------------------- */
	.news-unit {
		padding-bottom: 30px;
	}
	.news-unit ~ .news-unit {
		padding-top: 15px;
		border-top: 1px solid #fff;
	}
	.news-unit:last-of-type {
		border-bottom: 2px solid #fff;
	}
	.news-unit p {
		margin-top: 17px;
	}
	.news-unit .meta {
		margin-top: 12px;
		font-size: 1.1rem;
	}
	.news-unit .meta .tag {
		display: inline-block;
		margin-left: 5px;
		padding: 0 4px;
		border: 1px solid #fff;
		border-radius: 3px;
		font-size: 0.8rem;
		line-height: 1;
		vertical-align: middle;
	}
	.news-unit .title {
		margin-top: 4px;
	}
	.news-unit .img {

	}
	.news-unit .img img {
		width: 100%;
	}
	.news-unit a {
		padding-bottom: 2px;
		border-bottom: 1px dotted  #999;
	}
	.news-unit a:hover {
		text-decoration: none;
	}
/* pager -------------------------- */
.pager {
	position: relative;
	text-align: center;
	padding-top: 10px;
	line-height: 100%;
	font-size: 93%;
}
	.pager a {
		display: inline-block;
	}
	.pager .prev {
		position: absolute;
		left: 0;
	}
	.pager .next {
		position: absolute;
		right: 0;
	}

/* form -------------------------- */
.form-wrap {
	margin-top: 20px;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	background-color: rgba(0,0,0,0.4);
	padding: 0 6.25%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
	.form-wrap .btn-image {
		margin-top: 27px;
		margin-bottom: 29px;
	}
.form-list {
}
	.form-list select {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		color: #fff;
		border: solid 1px #fff;
		border-radius: 3px;
		padding: 0.4em;
		background-color: rgba(255,255,255,0);
		-webkit-box-sizing: border-box;
		box-sizing:border-box;
		background: url(/rabitobi_sp/img/bg-select_side_arrow.png) no-repeat right center;
		background-size: 19px 30px;
	}
	.form-list input[type="text"],
	.form-list textarea {
		width: 100%;
		border-radius: 3px;
		border: solid 1px #fff;
		padding:0.4em;
		color: #fff;
		background-color: rgba(255,255,255,0);
		box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.form-list textarea {
		min-height: 24rem;
	}
	.form-list dt {
		margin-top: 25px;
	}
	.form-list dt .important {
		margin-left: 5px;
		color: #ff8c8c;
	}
	.form-list dd {
		margin-top: 5px;
	}
	.form-list dd p {
		margin-top: 5px;
	}
	.form-list dd ul {
		margin-top: 5px;
		margin-bottom: 20px;
	}

h3.form-h3{
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 10px 0;
}

p.form-btn{
	margin: 10px 0 0 0;
}


.error_wrap{
	padding: 20px 0 0px 0;
}

.error_box{
	border: #ff8c8c 2px solid;
	width: 100%;
	margin: 0px auto;
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */ 
}

.error_box ul{
	margin: 10px 10px;
}

.error_box ul li{
	color: #ff8c8c ;
}



/* note -------------------------- */
.note-example {
	font-size: 1.1rem;
	color: #d5dac2;
}
.note-important {
	font-size: 1.1rem;
	color: #ff8c8c;
}



/* faq-list -------------------------- */
.faq-list {
}
	.faq-list dt {
		margin-top: 0px;
		font-size: 1.1rem;
	}
	.faq-list dt .tag {
		display: inline-block;
		margin-left: 5px;
		padding: 2px 4px;
		border: 1px solid #fff;
		border-radius: 3px;
		font-size: 1rem;
		line-height: 1;
		vertical-align: middle;
	}
	.faq-list dd {
		margin-top: 4px;
	}
	.faq-list dd a {
		padding-bottom: 2px;
		border-bottom: 1px dotted  #999;
	}
	.faq-list dd a:hover {
		text-decoration: none;
	}
	.faq-list dd + dt {
		margin-top: 19px;
	}

/* faq-unit -------------------------- */
	.faq-unit {
		padding-bottom: 30px;
	}
	.faq-unit ~ .faq-unit {
		padding-top: 15px;
	}
	.faq-unit:last-of-type {
	}
	.faq-unit p {
		margin-top: 17px;
	}
	.faq-unit .meta {
		margin-top: 12px;
		font-size: 1.1rem;
	}
	.faq-unit .meta .tag {
		display: inline-block;
		margin-left: 5px;
		padding: 0 4px;
		border: 1px solid #fff;
		border-radius: 3px;
		font-size: 0.8rem;
		line-height: 1;
		vertical-align: middle;
	}
	.faq-unit .title {
		margin-top: 4px;
	}
	.faq-unit .img {

	}
	.faq-unit .img img {
		width: 100%;
	}
	.faq-unit a {
		padding-bottom: 2px;
		border-bottom: 1px dotted  #999;
	}
	.faq-unit a:hover {
		text-decoration: none;
	}

.faq-unit dl dt{
	background: url(/rabitobi_sp/img/icn_q.png) no-repeat 0 0px;
	background-size: 8%;
	padding: 0 0 0 45px;
	line-height: 1.9em;
	min-height: 50px;
	font-weight: bold;
	
}


.faq-unit dl dd{
	background: url(/rabitobi_sp/img/icn_a.png) no-repeat 0 0px;
	background-size: 8%;
	padding: 0 0 0 45px;
	line-height: 1.9em;
	min-height: 50px;
	font-weight: normal;
}

.pager2{
	width: 100%;
	margin: 20px 0 40px 40px;
	width: auto;
}


.pager2 li{
	float: left;
	width: 40px;
	height: 40px;
	color: #035469;
	background: url(/rabitobi_sp/img/pager_off.png) no-repeat center center;
	font-size: 138.5%;
	text-align: center;
	padding: 12px 0 0 0;
	margin: 0 3px;
}

.pager2 li a:link,
.pager2 li a:visited{
	color: #035469;
}


.pager2 li.on{
	color: #FFF;
	background: url(/rabitobi_sp/img/pager_on.png) no-repeat center center;
}

.pager2 li.allow{
	color: #FFF;
	background: none;
}

.pager2 li.allow a:link,
.pager2 li.allow a:visited{
	color: #FFF;
}


/* wallpaper-unit -------------------------- */
.wallpaper-unit{
	margin: 0px auto;
	text-align: center;
}

.wallpaper-unit p{
	margin: 20px auto 40px;
	background-color: #000;
	padding: 20px 0;
}


.wallpaper-unit .devicetitle{
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #FFF;
	margin-bottom: 20px;

}

/* environment-unit -------------------------- */


#environment table{
	width: 100%;
	border-spacing: 5px !important;
	margin: 0px 0 20px 0;
}


#environment table th.th1{
	width: 70%;
	background: #fff;
	color: #035469;
	text-align: center;
	padding: 5px 0;
	font-weight: bold;
}

#environment table th.th2{
	width: 28%;
	background: #fff;
	color: #035469;
	text-align: center;
	padding: 5px 0;
	font-weight: bold;
	border-left: 3px solid #035368;
}

#environment table td{
	padding: 10px 0 10px 10px;
}

#environment h3{
	font-size: 24px;
	margin: 20px 0 5px 0;
}

/* ========================
	page styles
======================== */

/* top -------------------------- */
#top #main {
	margin-top: 50px;
	padding-bottom: 85px;
}
#top .box-catch + * {
	margin-top: 50px;
}
#top .page-title {
	margin-top: 60px;
}

#top .banner{
	text-align: center;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	display: block;
}
#top .banner a{
	display: block;
}

#top .banner img{
	width: 100%;
	height: auto;
	display: block;
}

#top .banner_cap{
	text-align: left;
	margin: 5px 0 20px 0;
}

#top .banner2{
	text-align: center;
	margin: 0 0 30px 0;
	width: 100%;
	height: auto;
	display: block;
}
#top .banner2 a{
	display: block;
}

#top .banner2 img{
	width: 100%;
	height: auto;
	display: block;
}


#top .banner3{
	text-align: center;
	margin: 30px 0 30px 0;
	width: 100%;
	height: auto;
	display: block;
}
#top .banner3 a{
	display: block;
}

#top .banner3 img{
	width: 100%;
	height: auto;
	display: block;
}



#top .book {
	margin: 10px auto 50px auto;
	text-align: center;
	position: relative;
	width: 100%;
	clear: both;
	height: auto;
}

#top .book img.book01{
	position: absolute;
	bottom: 6px;
	left: 10px;
	z-index: 3;
	width: 46%;

}

#top .book img.book02{
	position: absolute;
	bottom: 6px;
	right: 10px;
	z-index: 2;
	width: 46%;
}

#top .book img.book03{
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
}

#top .spec{
	width: 80%;
	margin: 50px 0 0 0;
}

#top .spec img{
	width: 100%;
}

/* news -------------------------- */
#news .page-title {
	margin-top: 40px;
}

/* privacy -------------------------- */
#privacy .page-title {
	margin-top: 43px;
}

/* contact -------------------------- */
#contact .utility {
	margin-top: 40px;
}

/* rabbit -------------------------- */
#rabbit .base-unit p  {
	margin-top: 28px;
}
#rabbit .base-unit p ~ p {
	margin-top: 25px;
}
#rabbit .base-unit p img {
	width: 100%;
}

#rabbit p.catch{
	padding: 5px 0 40px 0;
}

/* how2play -------------------------- */
#how2play #main {
	padding-bottom: 75px;
}
#how2play .page-title {
	margin-top: 36px;
}
#how2play .base-unit p  {
	margin-top: 0px;
}
#how2play .base-unit p ~ p {
	margin-top: 25px;
}
#how2play .base-unit p img {
	width: 100%;
}

/* about -------------------------- */
#about .page-title {
	margin-top: 44px;
}
#about .base-unit {
	margin-top: 7px;
}
#about .base-unit p {
	margin-top: 8px;
}

/* faq -------------------------- */
#faq .page-title {
	margin-top: 40px;
}




.pl_lyst{
	list-style-type: disc;
	padding: 10px 0 10px 15px ;
}
.pl_lyst li{
	margin: 0 0 10px 0;
}

.pl_lyst2{
	list-style-type:decimal;
	padding: 10px 0 10px 15px ;
}
.pl_lyst2 li{
	margin: 0 0 10px 0;
}

.pl_lyst li ol{
	list-style: decimal;	
	padding: 10px 0 10px 35px ;
}