@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

/*---------------------------------------------------------------------------
	shared
---------------------------------------------------------------------------*/

html {
	overflow-y:scroll;
}
body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	color: #2e2930; // 紫黒しこく
	font-size: 16px;
	background: #fff;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0px;
	padding: 0px;
    font-weight:normal;
}
img {
	border: none;
}
p {
	margin: 0px;
	padding: 0px;
	line-height: 150%;
}
li {
	list-style: none;
}
a{

	text-decoration: none;
	}

/*---------------------------------------------------------------------------
	common
---------------------------------------------------------------------------*/

body *{
  font-family: 'Rounded Mplus 1c', sans-serif;
	text-shadow: 1px 1px rgba(0,0,0,0.1);
}

html,body {
	width: 100%;height: 100%;
}

a {
	color: #60c;
	-webkit-transition: 0.2s;
	transition: 0.2s;
}
a:hover {
	color: #f63;
}

h2 {
	width: 100%;
	clear: both;
	color:#fff;
	margin-bottom: 10px;
	padding: 4px;
	border-radius: 5px;
	border: 1px solid #609;
	background: rgba( 102, 51, 153, 0.8 );
}

h3,h4 {
	width: 100%;
	clear: both;
	margin-bottom: 10px;
	padding: 4px;
	border-radius: 5px;
	border: 1px solid #93c;
	background: rgba( 240, 204, 255, 0.8 );
}

/*---------------------------------------------------------------------------
	header
---------------------------------------------------------------------------*/

header {
	text-align: center;
	height: 100%;
}

header h1{
	padding-top:5%;
	height: 100%;
	font-size:48px;
	background: rgba( 240, 204, 255, 0.2 );
	width: 100%;
}
header h2{
	height: 100%;
	padding:1% 0;
	font-size:32px;
	border:none;
	background: rgba( 240, 204, 255, 0.5 );
	width: 100%;
}
header h3{
	height: 100%;
	font-size:20px;
	border:none;
	border-radius: 0px;
	border-top: 1px solid #93c;
	border-bottom: 1px solid #93c;
	background: rgba( 240, 204, 255, 0.8 );
	width: 100%;
}

#menubar {
	text-align: center;
	position: absolute;
	top: 20%;
	width: 100%;
}

#menubar li {
	display: inline;
}

#menubar li a {
	background: rgba( 255, 255, 255, 0.8 );
	display: inline-block;
	text-decoration: none;
	color: #000;
	font-size: 32px;
	letter-spacing: 0.1em;
	width: 200px;
	line-height: 200px;
	border-radius: 20%;
	border: 4px solid #c6f;
	margin: 0px 20px 10px;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}

#menubar li a:hover {
	background: #93c;
	color: #fff;
}

/*---------------------------------------------------------------------------
	navi
---------------------------------------------------------------------------*/


div#nav {
	background: rgba( 204, 204, 240, 0.6 );
	text-align: left;
	width: 100%;
}

div#nav  h1{
	background: rgba( 204, 204, 240, 0.8 );
	font-size:20px;
	text-align: left;
	width: 100%;
}
div#nav li {
	float:left;
	padding:10px;
	font-size:14px;
	font-weight:bold;

}

div#nav li a{
	color:#333;
}
.cb-header {
  position: fixed;
  top: -100px;
  left: 0;
}

.cb-footer {
  position: fixed;
  top: 95%;
  left: 0;
}

.cb-footer h2{
  position: fixed;
  height: 6%;
  left: 0;
  text-align:center;
  font-size:24px;
  border: none;
  border-radius: 0px;
  border-top: 3px solid #c6f;
  background: rgba( 240, 204, 255, 0.8 );
}

div#nav p{
	background: rgba( 204, 204, 240, 0.8 );
}

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

.contents {
	overflow: hidden;
	background: #fff;
	background: rgba(255,255,255,0.6);
	padding: 4%;
	padding-top: 110px;
	margin-bottom: 80%;
}


/*---------------------------------------------------------------------------
	about
---------------------------------------------------------------------------*/


#about p.detail,#plan p.detail {
	padding:0;
	display:none;
}

#about span.next,#plan span.next{
  font-size:0px;
  border-color: #ece;
  border-style: solid;
  border-width: 15px 30px;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

/*---------------------------------------------------------------------------
	plan
---------------------------------------------------------------------------*/

#plan h3 {
  font-weight:bold;
	background: rgba( 255, 153, 240, 0.8 );
}

#plan h4::after{
  margin:5px;
  font-size:12px;
  border: solid 2px #c9c;
  background:#ece;
	background: rgba( 255, 255, 255, 0.8 );
  border-radius: 10%;
  text-align:right;
  /*content: '詳細';*/
  padding:1px 5px;
}


#plan h4.disabled{

	  border: 1px solid #ccc;
	  background: #ccc;
	}

#plan .planinfo{
  font-weight:bold;
  margin-bottom:40px;
	}
	
#plan{
  font-weight:bold;
  margin-bottom:40px;
	}

#plan .planinfo p.price{
  color:#c33;
  font-size:24px;
	}

#plan .planinfo p.comment{
  color:#f33;
  font-size:20px;
	}

#plan section section{
	width: 29%;
	padding: 0 2% ;
	float:left;
	}

/*---------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------*/

footer {
	clear: both;
	text-align: center;
	padding: 10px 0px;
	color: #000;
	text-shadow: 1px 1px rgba(0,0,0,0.2);
	margin-top: -70%;
}
footer a {
	text-decoration: none;
	border: none;
	color: #639;
}
footer .pr {
	display: block;
}
/*---------------------------------------------------------------------------
	table
---------------------------------------------------------------------------*/

.ta1 {
	width: 96%;
	margin: 0px auto 15px;
}
.ta1 th,td {
	border-bottom: 1px dotted #666666;
	padding: 10px;
	word-break: break-all;
}
.ta1 th {
	text-align:right;
	background:#ece;
	background: rgba( 204, 204, 240, 0.4 );
	width: 30%;
}
.ta1 th.head {
	font-weight:bold;
	font-size:24px;
	text-align:center;
	background:#ece;
	background: rgba( 153, 153, 204, 0.4 );
}
.ta1 td {
	text-align:left;
	background: rgba( 240, 240, 255, 0.4 );
}

/*---------------------------------------------------------------------------
/* pagetop
---------------------------------------------------------------------------*/
.pagetop {
	text-align: right;
}
.pagetop a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	background: #969;
	color: #fff;
	border-radius: 50%;
	width: 40px;
	line-height: 40px;
}

/*---------------------------------------------------------------------------
/* background
---------------------------------------------------------------------------*/
#bg img {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	width: 100%;
	height: 100%;
}

/*---------------------------------------------------------------------------
/*etc
---------------------------------------------------------------------------*/
.look {background: #333; color: #fff;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color:#d50f26;}
.pr {font-size: 10px;}



/*---------------------------------------------------------------------------
/*device setting
---------------------------------------------------------------------------*/
@media screen and (orientation: portrait){

.portrait {display: block;}
.landscape {display: none;}

}

@media screen and (orientation: landscape){

.portrait {display: none;}
.landscape {display: block;}

}

/*---------------------------------------------------------------------------
/*device setting 1
---------------------------------------------------------------------------*/
@media screen and (max-width:640px){


	#menubar li a {
		font-size: 28px;
		letter-spacing: normal;
		width: 120px;
		line-height: 120px;
	}

	.ta1, .ta1 td, .ta1 th {
		padding: 5px;
	}

    header h1{
    	font-size:28px;
    }
    header h2{
    	font-size:24px;
    }
	
#plan section section{
    width: 98%;
	padding: 4px ;
    clear: both;
	}
}

/*---------------------------------------------------------------------------
/*device setting 2
---------------------------------------------------------------------------*/
@media screen and (max-width:450px){

	#menubar li a {
		font-size: 24px;
		width: 120px;
		line-height: 120px;
	}
	
    header h1{
    	font-size:24px;
    }
    header h2{
    	font-size:20px;
    }
	
#plan section section{
    width: 98%;
	padding: 4px ;
    clear: both;
	}
}


/*---------------------------------------------------------------------------
/*device setting 3
---------------------------------------------------------------------------*/

@media screen and (max-height:420px) and (orientation: landscape){

	#menubar li a {
		font-size: 18px;
		width: 80px;
		line-height: 80px;
	}

    header h1{
    	font-size:20px;
		top: 20%;
    }
    header h2{
    	font-size:16px;
    }
    
}