﻿@charset "UTF-8";
/* base.css */

html {
	width: 100%;
	margin: 0 auto;
	background: #ffffff; /* Fills the page */
	position: relative; /* Fix for absolute positioning */
	display: block;
}

body { 
	width: 100%;
	overflow-x: hidden; 
	font-family: "メイリオ","Meiryo",Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",verdana,arial,clean,sans-serif;
	font-size: 12px;
	line-height: 165%;
	color: #363636;
}

body , html {
	height: 100%;
}




/*------------ 画像------------*/	


.alpha a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

img {
    max-width: 100%;
    height: auto;
}



/*=============================================================================*/
/* header */
/*=============================================================================*/

.header {
  -moz-background-size: cover;
       background-size: cover;
  width: 100%;
  /*background-attachment: fixed;*/
}

.inviteCode div.header {
  height: 900px;
}



.headerIn,
.introductionIn {
  width: 1000px;
  margin: 0 auto;
}

.headerIn {
  position: relative;
  height: 1000px;
}



.header h1 {
  text-align:left;
  padding: 18px 0 244px 10px;
}


.socialBtnWrap {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 1.5em;
  margin-left: 1000px;
  text-align: left;
}

.socialBtn {
  display: block;
}

.socialBtn div.fb-like {
  display: inline-block;
  padding-top: 10px;
  margin-bottom: 6px;
  z-index: 100;
}

.socialBtn div.twitter {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 30px;
}
/*=============================================================================*/
/* registBox */
/*=============================================================================*/

.headerWrap {
  width: 1200px;
  position: relative;
  top: 0;
  margin: auto
}

.headerWrap div.registArea {
  position: absolute;
  bottom: 10px;
  height: 330px;
  width: 960px;
  left: 50%;
  margin-left: -480px;
}


p.or {
  display: none;
}

/*
.btn-relux {
	background-color: #FFEC73;
	color: #000000;
	height: 46px;
	font-size: 16px;
}
/*



/*------------ Header navigation------------*/	

#background00 {
	width: 100%;
	height: 40px;
	background-color:#e40035;
	padding: 0 0 0 0;
	top: 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:5;
}


#background01 {
	width: 100%;
	background: #437bc1;
	padding: 0 0 0 0;
	margin-top: -1.8%;
	margin-bottom: -0.0em;
	position: relative;
	height:300px;
}


#background02 {
	width: 100%;
	background: #ffff99;
	
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}



#background03 {
	width: 100%;
	background: #fff;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}
#background04 {
	width: 100%;
	background-image: url(../../images/bk04.jpg);

	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}
#background05 {
	width: 100%;
	padding: 2% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}
#background05 img.yaku01{
position: absolute;
top:8.5%;
left:0;
}
#background05 img.yaku02{
position: absolute;
top:23%;
left:0;
}
#background05 img.yaku03{
position: absolute;
top:38%;
left:0;
}
#background05 img.yaku04{
position: absolute;
top:53%;
left:0;
}
#background05 img.yaku05{
position: absolute;
top:68%;
left:0;
}
#background05 img.yaku06{
position: absolute;
top:83%;
left:0;
}
#background06 {
	width: 100%;
	padding: 2% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}
#background07 {
	width: 100%;
	padding: 2% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}
#footer {
	width: 100%;
	background: #006699;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}
#footer p {
	font-size: 1.85em;
	color: #ffffff;
}
#footer p.font_copy {
	font-size: 1em;
	color: #ffffff;
}
#footer ul { margin: 0 auto 2em; overflow: hidden; width: 40%; zoom: 1 }
#footer li { float: left; margin-right: 11.2%; width: 25.8% }
#footer li.last { margin-right: 0 }
.yoga {
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	width: 100%;
	position: relative;
	top:0;
	left:0;
	z-index:5;
}
.yoga p1 {
	width: 100%;
	position: absolute;
	top:0;
	left:0;
}
.yoga p2 {
	width: 100%;
	position: absolute;
	top:0px;
	left:0px;
}
.yoga p3 {
	width: 100%;
	position: absolute;
	top:0;
	left:0;
}
.yoga p4 {
	width: 100%;
	position: absolute;
	top:0px;
	right:0;
}


.submitbu {
	padding: 1% 0 5% 0;
}	








/* pc */
@media screen and (min-width: 501px) {
/*ここにpc用スタイルを記述*/

#wrapper96 {
	width: 100%;
}
#wrapper100 {
	width: 100%;
}


.none_pc {
	display: none;
}


#wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
	max-width: 1000px;
}

#wrapper70 {
	width: 60%;
}
#wrapper80 {
	width: 70%;
}
#wrapper85 {
	width: 70%;
}
#wrapper90 {
	width: 70%;
}
#wrapper96 {
	width: 88%;
}
#wrapper100 {
	width: 80%;
}
#wrapper88 {
	width: 100%;
}






#table_form {
	width: 85%;
	padding: 0 0 0 0;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
}

#table_form .title {
	font-size: 1.0em;
}

#table_form .form {
	font-size: 0.98em;
	padding:1.3% 0 2.5% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}

#table_form .title span {
	background-color: #af0000;
	padding: 0.3% 3% 0.3% 3%;
	font-size: 0.85em;
	color: #ffffff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px; 
	border-radius:4px;
	margin-left: 2%;
}


#table_form02 {
	width: 95%;
	margin-top: 2.0rem;
	margin-bottom: -0.0rem;
	border-top: 1px #b19d54 solid;
	border-left: 1px #b19d54 solid; 
}

#table_form02 .td_left {
	background-color: #fcfcf7;
	font-size:0.92em;
	text-align: center;
	padding:3% 0 3% 0;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
	border-bottom: 1px #b19d54 solid;
	border-right: 1px #b19d54 solid; 
}

#table_form02 .td_left span {
	color: #FD1564;
}

#table_form02 .td_right {
	font-size:0.98em;
	background-color: #edf2e3;
	text-align: left;
	line-height: 1.8rem;
	padding:3% 0 3% 20px;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
	border-bottom: 1px #b19d54 solid;
	border-right: 1px #b19d54 solid; 
}	


.access {
  width:75%;
  text-align:left;
  padding: 0 0 0 0;
  margin-top: 2%;
  margin-bottom: 8%;
  border-top: 1px #323232 dashed;
}

.access ul li#li01 {
  display: block;
  list-style:none;
  width: 100%;
  background-color: #d7eefb;
  padding: 0.55% 0 0.5% 0;
  margin-top: -0.0rem;
  margin-bottom: -0.0rem;
  border-bottom: 1px #323232 dashed;

}
.access ul li#li02 {
  display: block;
  list-style:none;
  width: 100%;
  background-color: #ffffff;
  padding: 0.55% 0 0.5% 0;
  margin-top: -0.0rem;
  margin-bottom: -0.0rem;
  border-bottom: 1px #323232 dashed;

}

.font_copy {
	text-align: center;
	width: 70%;
	color: #ffffff;
	font-size:1.1em;
	line-height: 1.8em;
	padding: 3% 0 6% 0;
	margin-top: -0.0em;
	margin-bottom:-0.0em;
}
	


.font_address {
	color: #323232;
	font-size: 1.6em;
	line-height: 1.3em;
	text-align:center;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom:-0.0em;
}
.font_address span {
	font-size:0.8em;
}



.title_head01 {
	padding:0 0 0 44%;
	margin-top:-15%; 
	margin-bottom:-0.0em; 
	position:relative; 
	z-index:100;
}




	
#titlebar01 {
	display: inline-block;
	width: 100%;
	padding: 2% 0 2% 0;
	background-color: #FFF100;
	margin-top: 3%;
	margin-bottom: 4%;
}

#titlebar02 {
	display: inline-block;
	background-color: #ffffff;
	padding: 1.5% 0 1.5% 4%;
	width: 80%;
	text-align: left;
	font-size: 1.7em;
	font-weight: 800;
	color: #af0000;
	-webkit-border-radius:6px;
	-moz-border-radius:6px; 
	border-radius:6px;
	margin-top: -0.0em;
	margin-bottom: 3%;
}

.font_overview {
	width: 95%;
	font-size: 1.35em;
	line-height: 1.8em;
	padding: 0 0 7% 3%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}
.font_overview span {
	font-weight: 800;
}

.font_formtext01 {
	font-size:　1.0em;
	padding: 0 0 0 0;
	text-align: left;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}


.font_lptxt01 {
	width: 95%;
	font-size: 1.4em;
	line-height: 1.8em;
	color: #ffffff;
	padding: 6% 0 4% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	text-align: left;
	padding-left:1.5em;
	text-indent:-1.5em;
}

.font_lptxt02 {
	width: 98%;
	font-size: 1.4em;
	line-height: 1.8em;
	color: #ffffff;
	padding: 0 0 4% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	text-align: left;
}
.font_lptxt03 {
	width: 98%;
	font-size: 1.7em;
	line-height: 1.8em;
	color: #ffffff;
	padding: 0 0 4% 0;
	margin-top: -50%;
	margin-bottom: -0.0em;
	text-align: center;
}
#flow{
width: 100%;
height: 1250px;
position:relative;
}
.flow01{
position:absolute;
width: 850px;
left:0;
top:20px;
z-index:99;

}
.flow02{
position:absolute;
width: 850px;
right:50px;
top:300px;
z-index:-1;

}
.flow03{
position:absolute;
width: 850px;
left:0;
top:500px;
z-index:2;

}
.flow04{
position:absolute;
width: 850px;
right:50px;
top:800px;
z-index:2;
}
.flow05{
position:absolute;
width: 850px;
left:0;
bottom:0;
z-index:999;
}
.btn {
	position: fixed;
	right: 2%;
	bottom: 9%;
z-index:9999;
}
}
 
 
/* smartPhone */
@media screen and (max-width: 500px) {
/*ここにスマホ用スタイルを記述*/

.none_sp {
	display: none;
}
.btn {
position: fixed;
	width: 25%;
right: 2%;
bottom: 5%;
z-index:9999;
}
#background01 {
	width: 100%;
	background: #437bc1;
	padding: 0 0 0 0;
	margin-top: -1.8%;
	margin-bottom: -0.0em;
	position: relative;
	height:120px;
}
#background02 {
	width: 100%;
	background: #ffff99;
	
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}
#footer p {
	font-size: 14px;
	color: #ffffff;
}
#footer p.font_copy {
	font-size: 0.8em;
	color: #ffffff;
}
#wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#wrapper70 {
	width: 70%;
}
#wrapper80 {
	width: 80%;
}
#wrapper85 {
	width: 96%;
}
#wrapper90 {
	width: 90%;
}
#wrapper88 {
	width: 90%;
}

#flow{
width: 100%;
height: 560px;
position:relative;
}
.flow01{
position:absolute;
width: 100%;
left:0;
top:20px;
z-index:5;

}
.flow02{
position:absolute;
width: 100%;
right:2%;
top:130px;
z-index:-1;

}
.flow03{
position:absolute;
width: 100%;
left:0;
top:250px;
z-index:2;

}
.flow04{
position:absolute;
width: 100%;
right:2%;
top:360px;
z-index:2;
}
.flow05{
position:absolute;
width: 100%;
left:0;
bottom:0;
z-index:100;
}
	




.access {
  width:95%;
  text-align:left;
  padding: 0 0 0 0;
  margin-top: 2%;
  margin-bottom: 8%;
  border-top: 1px #323232 dashed;
}



.font_copy {
	text-align: center;
	width: 100%;
	color: #ffffff;
	font-size:0.65rem;
	padding: 0 0 1% 0;
	margin-top: -0.0rem;
	margin-bottom:-0.0rem;
}

.font_address {
	color:#323232;
	font-size: 0.9rem;
	text-align:center;
	padding: 0 0 3% 0;
	margin-top: -0.0rem;
	margin-bottom:-0.0rem;
}
.font_address span{
	font-size: 0.7rem;
}



.title_head01 {
	padding:0 0 0 35%;
	margin-top:-19%; 
	margin-bottom:-0.0em; 
	position:relative; 
	z-index:100;
}



.font_overview {
	width: 90%;
	font-size: 0.9rem;
	line-height: 1.2rem;
	padding: 0 0 7% 3%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}

.font_overview span {
	font-weight: 800;
}





#footer {
	width: 100%;
	background: #006699;
	padding: 0 0 5% 0 ;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}


}










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

.cl {
	clear: left;
}

#title {
	margin: 0px;
	position: absolute;
	top: -9999px;
}


a:link {
	color: #e42363;
	text-decoration:none;
	outline: none;
}

a:visited {
	color: #e42363;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #ffb2cb;
	text-decoration: underline;
	outline: none;
}

a:active {
	color: #fed3e1;
	text-decoration: underline;
	outline: none;
}

body,div,ul,ol,li,h1,h2,td {
	margin: 0;
	padding: 0;
	list-style:none;
}



