@charset "utf-8";
.back {
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 0px;
	width: 100%;
	margin: 0 auto;
	padding: 0px;
}
section { margin-bottom: 0px;}






.tip {
    color: #fff;
    background:#363636;
    display:none; /*--基本は非表示--*/
    padding:10px;
    position:absolute;
    z-index:1000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: auto;
}



.circle_btn{
  font-size: 20px;
  display: block;
  text-decoration: none;
  height:180px;
  width: 180px;
  line-height: 180px;
  font-weight:bold;
  margin:6px auto;
  text-align: center;
  background: #fff;
  color: #2bb6c1;
  border:solid 2px #2bb6c1;
  border-radius: 90px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;}

.circle_btn:hover{
  color: #fff;
  background: #2bb6c1;
  cursor: pointer;
  }

@media only screen and (max-width:768px){
.circle_btn{
  font-size: 18px;
  height:45px;
  width: 180px;
  line-height: 45px;
  border-radius: 5px;
}
}

.square_btn{
  font-size: 18px;
  display: block;
  text-decoration: none;
  height:45px;
  width: 180px;
  line-height: 45px;
  font-weight:bold;
  margin:6px auto;
  text-align: center;
  background: #fff;
  color: #2bb6c1;
  border:solid 2px #2bb6c1;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;}

.square_btn:hover{
  color: #fff;
  background: #2bb6c1;
  cursor: pointer;
  }


.square_btn2{
  font-size: 16px;
  display: block;
  text-decoration: none;
  font-weight:bold;
  height:45px;
  width: 180px;
  line-height: 21px;
  margin:6px auto;
  border-radius: 5px;
  text-align: center;
  vertical-align:middle;
  padding:12px 0;
  background: #fff;
  border:solid 2px #FF3300;
  color: #FF3300;
  
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;}
  
.square_btn2 b{
  font-size: x-large;
  line-height: 28px;
  }

.square_btn2:hover{
  cursor: pointer;
  
  color: #fff;
  background: #FF3300;
  
  }
  

.square_btn1{
  font-size: 16px;
  display: block;
  text-decoration: none;
  font-weight:bold;
  height:45px;
  width: 180px;
  line-height: 21px;
  margin:6px auto;
  border-radius: 5px;
  text-align: center;
  vertical-align:middle;
  padding:12px 0;
  background: #fff;
  color: #009933;
  border:solid 2px #009933;
  
  
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;}
  
.square_btn1 b{
  font-size: x-large;
  line-height: 28px;
  }

.square_btn1:hover{
  color: #fff;
  background: #009933;
  cursor: pointer;
  }
  



/* -----------------------------------------------
Table Design
----------------------------------------------- */
table {
	border-top: 1px solid #4f4d47;
	border-right: 1px solid #4f4d47;
	width: 100%;
	border-spacing: 0px;
	margin: 0 auto;
}
th, td {
	border-bottom: 1px solid #4f4d47;
	border-left: 1px solid #4f4d47;
	text-align: center;
	padding: 5px;
font-size:18px;
vertical-align:middle;
}
th { background-color: #61c5bb; color: #fff;
font-weight:bold;}

td span{
color: #FF3300;
text-align:right;
font-size:22px;
font-weight:bold;
}

/* -----------------------------------------------
Title Design
----------------------------------------------- */

.h_btn,
.a_btn,
.r_btn
{
	background-color:#eee;
}

.h_btn span,
.a_btn span,
.r_btn span
{
	font-family:"AR P丸ｺﾞｼｯｸ体E","メイリオ",verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-weight:normal;
	color:#fff;
	padding:8px 8px;
	border-radius: 4px;
}

.h_btn span{
	background-color:#0066CC;
}
.a_btn span{
	background-color:#A40029 ;
}
.r_btn span{
	background-color:#006E4B;
}

.p10 span{
	padding:8px 19px;
}


/* -----------------------------------------------
Media Query
----------------------------------------------- */
@media only screen and (max-width: 640px) {
.back { border-radius: 0px; width: 100%; padding: 10px;}

/*-------------- レイアウトを変更する --------------*/
#demo00 table { width: 100%; border:none; padding: 10px;}
#demo00 thead { display: none;}
#demo00 tr {
	display: block;
	margin-bottom: 20px;
	border-top: 1px solid #4f4d47;
}
#demo00 td {
	display: block;
	text-align: center;
	border-right: 1px solid #4f4d47;
	border-bottom: none;
	padding: 10px;
}

/* tdのデザイン */
#demo00 td:nth-of-type(1) { background-color: #61c5bb; text-align: center; color: #fff;}
#demo00 td:last-child { border-bottom: 1px solid #4f4d47;}
#demo00 td:before {
	color: #fff;
	display: block;
	background-color: #61c5bb;
	font-size:16px;
	line-height:30px;
	font-weight:bold;
}

/* contentでタイトルを追加 */
#demo00 td:nth-of-type(2):before { content: "内容";}
#demo00 td:nth-of-type(3):before { content: "売買データベース";}
#demo00 td:nth-of-type(4):before { content: "賃貸データベース";}
#demo00 td:nth-of-type(5):before { content: "動作サンプル";}



/*-------------- レイアウトを変更する --------------*/
#demo01 table { width: 100%; border:none; padding: 10px;}
#demo01 thead { display: none;}
#demo01 tr {
	display: block;
	margin-bottom: 20px;
	border-top: 1px solid #4f4d47;
}
#demo01 td {
	display: block;
	text-align: center;
	border-right: 1px solid #4f4d47;
	border-bottom: none;
	padding: 10px;
}

/* tdのデザイン */
#demo01 td:nth-of-type(1) { background-color: #61c5bb; text-align: center; color: #fff;}
#demo01 td:last-child { border-bottom: 1px solid #4f4d47;}
#demo01 td:before {
	color: #fff;
	display: block;
	background-color: #61c5bb;
	font-size:16px;
	line-height:30px;
	font-weight:bold;

}

/* contentでタイトルを追加 */
#demo01 td:nth-of-type(2):before { content: "データベース";}
#demo01 td:nth-of-type(3):before { content: "初期費用";}
#demo01 td:nth-of-type(4):before { content: "月額費用";}
#demo01 td:nth-of-type(5):before { content: "お申し込み";}


/*-------------- レイアウトを変更する --------------*/
#demo02 table { width: 100%; border:none; padding: 10px;}
#demo02 thead { display: none;}
#demo02 tr {
	display: block;
	margin-bottom: 20px;
	border-top: 1px solid #4f4d47;
}
#demo02 td {
	display: block;
	text-align: center;
	border-right: 1px solid #4f4d47;
	border-bottom: none;
	padding: 10px;
}

/* tdのデザイン */
#demo02 td:nth-of-type(1) { background-color: #61c5bb; text-align: center; color: #fff;}
#demo02 td:last-child { border-bottom: 1px solid #4f4d47;}
#demo02 td:before {
	color: #fff;
	display: block;
	background-color: #61c5bb;
	font-size:16px;
	line-height:30px;
	font-weight:bold;

}

/* contentでタイトルを追加 */
#demo02 td:nth-of-type(2):before { content: "データベース";}
#demo02 td:nth-of-type(3):before { content: "初期費用";}
#demo02 td:nth-of-type(4):before { content: "月額費用";}
#demo02 td:nth-of-type(5):before { content: "継続割シミュレーション";}
#demo02 td:nth-of-type(6):before { content: "お申し込み";}