@charset "utf-8";
/* CSS Document */

/*-------------------------------------
	Main Visual
-------------------------------------*/

#main_visual{
	background-image: url(../images/other/main.jpg);
}


.con_center{
	text-align: center;
	margin-bottom: 50px;
}

/*-------------------------------------
	page_link
-------------------------------------*/

.page_link{
	background-color: #BFBFBF;
	padding-top: 20px;
	padding-bottom: 20px;
	
	
}

.page_link ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}

.page_link ul li{
	flex-basis: 16.666666%;
	text-align: center;
	height: 80px;
	border-left: 1px solid #CFCFCF;
	border-right: 1px solid #CFCFCF;
	margin-left: -1px;
}

.page_link ul li a{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
}

.page_link ul li a:after{
	content: '';
	display: block;
	background: url(../images/bnbmatching/pagelink_arrow.png) no-repeat left top;
	width: 19px;
	height: 10px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -9px;
	transition: all 0.2s;
}

@media screen and (min-width: 769px) {
	.page_link ul li a:hover:after{
		bottom: -5px;
	}
}

/*-------------------------------------
	bnb共通
-------------------------------------*/
.box{
	padding-top: 80px; /* 打ち消し用のパディング */
	margin-top: -80px; /* 固定ナビの高さ分のネガティブマージン */
}

.t_logo{
	vertical-align: middle;
	margin-left: 0.3em;
	margin-right: 0.3em;
}

/*@media screen and (max-width: 768px) {
	.t_logo{
		display: block;
	}
}
*/
.t_logo img{
	display: inline-block;
	vertical-align: middle;
}

/*-------------------------------------
	slider 共通
-------------------------------------*/

.slider-container {
  display: none;
  position: relative;
}
.slider-container.initialized {
  display:block;
}
.slider {
  overflow: hidden;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 10;  /* 重要 */
}
.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}
.slick-slide {
  outline: 0;
}


/*-------------------------------------
	Propaties
-------------------------------------*/

.propaties .slider {
	overflow: hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.propaties .slick-list {
  margin-right: -30px;  /* ガター分ネガティブマージン */
}
.propaties .slider-arrow {
  height: 38px;
  margin-top: -160px;
	padding: 5px 2px;
	background-color: #fff;
}

.propaties .slider-arrow > img{
	width: 80%;
}

.propaties .slick-slide {
	margin-right: 30px;  /* ガター */
	background: url(../images/bnbmatching/arrow_detail.png) no-repeat right bottom #FFF;
}

.propaties .slick-slide figure{
	width: 100%;
	position: relative;
}

.propaties .slick-slide figure:before{
	content: '';
	display: block;
	padding-top: 73.988439%;
}

.propaties .slick-slide figure img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

.propaties .slick-slide .text{
	padding: 10px 20px 40px;
}

.propaties .slick-slide header{
	border-bottom: 1px solid #EEE;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: flex-start;
	padding-bottom: 10px;
}

.propaties .slick-slide header .category{
	background-color: #09101C;
	color: #FFF;
	display: inline-block;
	line-height: 30px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 20px;
	word-break: keep-all;
}

.propaties .slick-slide header h5{
	display: inline-block;
	vertical-align: top;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
}

.propaties .slick-slide header h5 .code{
	display: block;
}

.propaties .slick-slide .data{
	border-bottom: 1px solid #EEE;
	padding-top: 10px;
	padding-bottom: 10px;
}

.propaties .slick-slide .data dt{
	float: left;
	clear: both;
	font-weight: bold;
	font-size: 15px;
	margin-right: 0.5em;
}

.propaties .slick-slide .data dt:after{
	content: '：';
}

.propaties .slick-slide .data dd.price{
	font-size: 22px;
	margin-top: -7px;
}

.propaties .slick-slide .comment{
	padding-top: 10px;
}

/*-------------------------------------
	Start
-------------------------------------*/

.start{
	overflow: hidden;
}

.start li{
	width: calc(33.333333% - 33.333333px);
	margin-left: 50px;
	float: left;
	text-align: center;
}

.start li:nth-child(3n+1){
	clear: both;
	margin-left: 0;
}

.start li img{
	max-height: 130px;
}

.start li a img{
	opacity: 1;
}

.start li .button{
	position: relative;
	background-color: #061019;
	color: #FFF;
	height: 50px;
	display: flex;
  	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.start li .button:after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 13px;
	height: 18px;
	margin-top: -9px;
	transition: all 0.2s;
	background: url(../images/bnbmatching/start_allow.png) no-repeat left top;
}

@media screen and (min-width: 769px) {
	.start li a:hover .button:after{
		right: 5px;
	}
}

/*-------------------------------------
	Recommended
-------------------------------------*/

#reco .gray{
	padding-top: 80px;
	padding-bottom: 110px;
}

#reco #start_bnb{
	margin-top: 130px;
}

#reco #start_bnb .start{
	margin-top: 80px;
}

#reco .coming{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 100px;
}

#reco .gray .coming{
	margin-top: 20px;
	margin-bottom: 0;
}

/*-------------------------------------
	List
-------------------------------------*/

#list .gray{
	padding-top: 70px;
	padding-bottom: 160px;
}

#list section{
	margin-bottom: 150px;
}

#list section:last-of-type{
	margin-bottom: 0;
}

#list section h4{
	height: 40px;
	line-height: 40px;
	border-left: 5px solid #09101C;
	border-bottom: 1px solid #09101C;
	margin-bottom: 50px;
	padding-left: 10px;
}

#list .coming{
	text-align: center;
}

/*-------------------------------------
	Biginner
-------------------------------------*/

#biginner .start{
	margin-top: 100px;
}

/*-------------------------------------
	Detail
-------------------------------------*/

.detail{
	padding-top: 70px;
	padding-bottom: 50px;
}

.detail p,.detail .intro p.f_serif.txt_c{
	color: #FFF;
}

.detail .btn_push{
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.detail .btn_push::after{
	border-color: #FFF;
}

.detail .btn_push a{
	background-color: #FFF;
	color: #08101B;
}

/*-------------------------------------
	Database
-------------------------------------*/

#database{
	background-image: url(../images/bnbmatching/database_bg.jpg)
}

/*-------------------------------------
	Purchase
-------------------------------------*/

#purchase{
	margin-top: 100px;
}

/*-------------------------------------
	type
-------------------------------------*/

.type > div{
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 50px 50px;
	align-items: center;
}

@media screen and (max-width: 768px) {
	.type > div.support{
		padding-left: 20px!important;
		padding-right: 20px!important;
	}
}

.type > div figure{
	flex-basis: 180px;
	max-width: 180px;
	flex-grow: 1;
	text-align: center;
	margin-right: 50px;
}

.type > div figcaption{
	margin-top: 20px;
}

.type > div figure img{
	max-height: 170px;
}

.type > div ul,.type > div p{
	flex-grow: 2;
	width: 100%;
}

.type > div .assessment figure{
	margin-right: 0;
}

.type .assessment li{
	padding-right: 0;
}

/*-------------------------------------
	Reason
-------------------------------------*/

#reason ul{
	overflow: hidden;
}

#reason ul li{
	width: calc(33.333333% - 33.333333px);
	min-height: 366px;
	margin-left: 50px;
	float: left;
	text-align: center;
	background-position: center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

/*#reason ul li:before{
	content: '';
	padding-top: 100%;
}*/

#reason ul li:nth-child(3n+1){
	clear: both;
	margin-left: 0;
}

#reason ul li:nth-child(1){
	background-image: url(../images/bnbmatching/reason01.jpg);
}

#reason ul li:nth-child(2){
	background-image: url(../images/bnbmatching/reason02.jpg);
}

#reason ul li:nth-child(3){
	background-image: url(../images/bnbmatching/reason03.jpg);
}

#reason ul li p{
	color: #FFF;
}

#reason ul li p.number{
	font-size: 80px;
	border-bottom: 1px solid #FFF;
	line-height: 1.2;
}

#reason ul li p.comment{
	margin-top: 50px;
	font-weight: bold;
}

/*-------------------------------------
	Sublease
-------------------------------------*/

#sublease{
	margin-top: 100px;
	background-image: url(../images/bnbmatching/sublease_bg.jpg);
}

/*-------------------------------------
	Case
-------------------------------------*/

#case .slider-container{
	padding-top: 50px;
	padding-bottom: 50px;
}

#case .slider-container .slider{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#case .slider-container .slider .slick-slide{
	overflow: hidden;
	width: 100%;
}

#case .slider-container .slider .slick-slide figure{
	width: 55%;
	min-height: 300px;
	float: left;
}

#case .slider-container .slider .slick-slide figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

#case .slider-container .slider .slick-slide .text{
	width: 45%;
	float: left;
	padding: 50px 0px 50px 50px;
}

#case .slider-container .slider .slick-slide .text h4{
	font-weight: bold;
	color: #061019;
	font-size: 22px;
	margin-bottom: 20px;
}

#case .slider-container .slider .slick-slide .text dl dt{
	float: left;
	font-weight: bold;
	clear: both;
	margin-right: 0.5em;
}
#case .slider-container .slider .slick-slide .text dl dt:after{
	content: '：';
}

#case .start{
	margin-top: 100px;
}

#case .coming{
	text-align: center;
	font-size: 18px;
	line-height: 1.0;
	font-weight: bold;
	padding-top: 130px;
	padding-bottom: 100px;
}

#case .gray .coming{
	padding-top: 100px;
}

/*-------------------------------------
	Support
-------------------------------------*/

#support .gray ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: stretch;
}

#support .gray{
	padding-top: 50px;
	padding-bottom: 40px;
}

#support .gray ul li{
		flex: 1 1 20%;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 50px;
	}

#support .gray ul li figure{
	border: 1px solid #09101C;
	text-align: center;
	height: 100%;
	max-width: 160px;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px;
	align-items: center;
	flex-direction: column;
	justify-content:center;
}

#support .gray ul li figure figcaption{
	margin-top: 10px;
	line-height: 1.2;
}

/*-------------------------------------
	table 共通
-------------------------------------*/

dl.table{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #EEE;
}

dl.table > dt{
	color: #061019;
	font-size: 15px;
	font-weight: bold;
	background-color: #EEE;
	border-bottom: 1px solid #FFF;
}

dl.table dl.data{
	overflow: hidden;
}

dl.table dl.data dt{
	float: left;
	clear: both;
	font-weight: bold;
	font-size: 15px;
	margin-right: 0.5em;
}

dl.table dl.data dt:after{
	content: '：';
}

dl.table dl.data dd{
	float: left;
}

dl.table > dt,dl.table > dd{
	padding: 20px;
}

@media screen and (min-width: 769px) {
	dl.table > dd{
		border-bottom: 1px solid #EEE;
	}
}

.table_small{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	border: 1px solid #EEE;
	border-bottom: 0;
}

.table_small > dl{
	flex-basis: 33.333333%;
	border: 0;
	flex-flow: column;
	align-items: stretch;
	justify-content: flex-start;
	/*display: block;*/
}

.table_small > dl > dt{
	border-bottom: 0;
	margin-bottom: auto;
	flex-grow: 0;
	border-left: 1px solid #FFF;
}

.table_small > dl > dd{
	border-bottom: 0;
	flex-grow: 2;
	border-left: 1px solid #EEE;
}

.table_small > dl:nth-child(3n+1) dt,.table_small > dl:nth-child(3n+1) dd{
	border-left: 0;
}

dl.table.large > dt,dl.table.large > dd{
	flex-basis: 100%;
}

dl.table.large > dd:last-of-type{
	border-bottom: 0;
}


/*-------------------------------------
	Basic Information
-------------------------------------*/

#basic_info .intro .category{
	background-color: #09101C;
	color: #FFF;
	font-size: 18px;
	padding-left: 10px;
	padding-right: 20px;
	max-width: 140px;
}

#basic_info dl.table{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

#basic_info dd.price{
	font-size: 22px;
	margin-top: -7px;
}

@media screen and (min-width: 769px) {

	#basic_info dl.table dt,#basic_info dl.table dd{
		flex-basis: 25%;
	}
	#basic_info dl.table dt:nth-last-of-type(-n+2),#basic_info dl.table dd:nth-last-of-type(-n+2){
		border-bottom: 0;
	}
}

/*-------------------------------------
	image
-------------------------------------*/

#image .slider-image-container, #image .slider-image-nav-container {
	display: none;
	position: relative;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#image .slider-image-container.initialized, #image .slider-image-nav-container.initialized {
  display: block;
}
#image .slider-image-nav-container {
  margin-top: 18px;
}
#image .slider-image {
  overflow: hidden;
}
#image .slider-image-nav {
	width: calc(100% - 53px);
	margin-left: auto;
	margin-right: auto;
}

#image .slider-image-nav .slick-list {
  margin-right: -20px;  /* ガター分ネガティブマージン */
}

#image .slider-image-nav .slick-slide {
	margin-right: 20.5px;  /* ガター */
}

#image .slider-arrow {
  position: absolute;
  top: 50%;
  height: 38px;
  margin-top: -19px;  /* 高さの半分だけネガティブマージン */
  cursor: pointer;
  z-index: 10;  /* 重要 */
}
#image .slider-prev {
  left: 0;
}
#image .slider-next {
  right: 0;
}
#image .slick-slide {
  outline: 0;
}
#image .slider-image .slick-slide > img, #image .slider-image-nav .slick-slide > img {
  display: block;
  width: 100%;
  height: auto;
}

/*-------------------------------------
	Detail Section
-------------------------------------*/

.detail_section{
	max-width: 1040px;
}

.detail_section h4.line{
	font-size: 26px;
	color: #061019;
	border-bottom: 1px solid #EEE;
}

/*-------------------------------------
	Reccomended Point
-------------------------------------*/

#reco_point h4{
	margin-bottom: 20px;
}

#reco_point p{
	padding-left: 10px;
	padding-right: 20px;
}

@media screen and (max-width: 768px){
	#reco_point p{
		padding-left: 0;
		padding-right: 0;
	}
}

#reco_point .table_set{
	margin-top: 50px;
}

/*-------------------------------------
	Cont_lr
-------------------------------------*/
.accordionList01 {
	float: left;
	margin: 0.5%;
	padding: 39px 2%;
	width: 49%;
	background: #fff;
	box-sizing: border-box;
}

.accordionList01 dt {
	padding: 0 0 20px;
	font-size: 1.5rem;
	font-weight: 700;
}
.accordionList01 dt.head01 {
	padding: 0 0 10px;
	font-size: 2.4rem;
	line-height: 1.3;
}
.accordionList01 dd {
	padding: 0;
	box-sizing: border-box;
}
.accordionList01 dd:before {
	padding-top: 20px;
}

.accordionList02{

	margin: 0.5%;
	padding: 39px 2%;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
}

.accordionList02 dt {
	padding: 0 0 20px;
	font-size: 1.5rem;
	font-weight: 700;
}
.accordionList02 dt.head01 {
	padding: 0 0 10px;
	font-size: 2.4rem;
	line-height: 1.3;
}
.accordionList02 dd {
	padding: 0;
	box-sizing: border-box;
}
.accordionList02 dd:before {
	padding-top: 20px;
}





.list01 li:before {
	vertical-align: top;
	padding: 2px 2px 0 0;
	font-size: 1.0rem;
}
.list01 li:before {
    content: "■";
    color: #1d4f86;
    display: inline-block;
    vertical-align: top;
}
.list01 li span {
    display: inline-block;
    width: calc( 100% - 1.5rem);
}
.list01 li {
	margin: 0 0 12px;
	font-size: 1.0rem;
	line-height: calc(22/15);
}
.list01 li:last-child {
	margin: 0;
}
.list01 li span {
	width: calc( 100% - 1.6rem);
}
.mod_bg01 {
    background: #f7f9fa;
}
.mod_bg01 {
	margin: 40px 0;
	padding: 20px;
	clear: both;
}

/*-------------------------------------
	Income
-------------------------------------*/

#income h4{
	margin-bottom: 30px;
}

#income dl{
	color: #061019;
	font-size: 18px;
	font-weight: bold;
}

#income dl:first-child{
	border-bottom: 1px solid #EEE;
	margin-bottom: 20px;
}

@media screen and (min-width: 769px) {
	#income dl dt{
		float: left;
	}
}

#income dl dd{
	text-align: right;
	margin-bottom: 20px;
}

/*-------------------------------------
	Access
-------------------------------------*/

#access h4{
	margin-bottom: 60px;
}

#access p{
	color: #061019;
	font-size: 18px;
	font-weight: bold;
}


@media screen and (max-width: 768px){

	/*-------------------------------------
		slider 共通
	-------------------------------------*/

	.slick-dots{
		text-align: center;
		font-size: 0;
		margin-top: 20px;
	}

	.slick-dots li{
		background-color: rgba(6,16,25,0.50);
		text-indent: -9999px;
		width: 20px!important;
		height: 20px;
		border-radius: 50%;
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
	}

	.slick-dots li.slick-active{
		background-color: #061019;
	}


	.accordionList01 {
		float: left;
		margin: 0%;
		padding: 39px 2%;
		width: 100%;
		background: #fff;
		box-sizing: border-box;
	}
	/*-------------------------------------
		page_link
	-------------------------------------*/

	.page_link ul{
		flex-wrap: wrap;
	}
	.page_link ul li{
		flex-basis: 50%;
		margin-bottom: 10px;
		height: 60px;
	}

	.page_link ul li:nth-last-of-type(-n+2){
		margin-bottom: 0;
	}

	/*-------------------------------------
		Propaties
	-------------------------------------*/

	.propaties .slick-list {
	  margin-right: 0px;  /* ガター分ネガティブマージン */
	}
	.propaties .slick-slide {
		margin-right: 0px;  /* ガター */
	}

/*	.propaties .slick-slide .data dt{
		float: none;
	}
*/
	/*-------------------------------------
		type
	-------------------------------------*/

	.type > div{
		flex-wrap: wrap;
		padding-top: 30px;
		padding-bottom: 30px;
		justify-content: center;
	}

	.type > div > figure{
		flex-basis: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}

	.type > div > figure img{
		max-width: 100px;
	}

	/*-------------------------------------
		Reason
	-------------------------------------*/

	#reason ul li{
		margin-bottom: 30px;
		min-height: 0;
	}


	#reason li:last-child{
		margin-bottom: 0;
	}


	/*-------------------------------------
		Start
	-------------------------------------*/

	.start li{
		margin-bottom: 50px;
	}

	.start li:last-child{
		margin-bottom: 0;
	}

	.start li img{
		max-width: 100px;
	}

	/*-------------------------------------
		Recommended
	-------------------------------------*/

	#reco .gray{
		padding-top: 40px;
		padding-bottom: 60px;
	}

	#reco .coming{
		margin-top: 60px;
	}

	/*-------------------------------------
		List
	-------------------------------------*/

	#list .gray{
		padding-top: 35px;
		padding-bottom: 80px;
	}

	#list section{
		margin-bottom: 60px;
	}

	#list section h4{
		margin-bottom: 30px;
	}

	/*-------------------------------------
		Case
	-------------------------------------*/

	#case .slider-container .slider .slick-slide figure{
		min-height: 0;
		width: calc(100% - 53px)!important;
	}

	#case .slider-container .slider .slick-slide .text{
		padding: 0;
		margin-top: 20px;
		width: calc(100% - 53px)!important;
	}

	/*-------------------------------------
		Support
	-------------------------------------*/

	#support .gray{
		padding-top: 30px;
		padding-bottom: 20px;
	}

	#support .gray ul li{
		flex: 1 1 33.333333%;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 30px;
	}

	/*-------------------------------------
		table 共通
	-------------------------------------*/

	dl.table > dt,dl.table > dd{
		flex-basis: 100%;
		border-bottom: 0;
		padding: 10px 20px;
	}

	.table_small{
		display: block;
	}

	.table_small > dl.table{
		display: block;
	}

	.table_small > dl.table > dt,.table_small > dl.table > dd{
		border-left: 0;
		display: block;
		padding: 10px 20px;
		flex-grow: 0;
	}

	/*-------------------------------------
		Detail Section
	-------------------------------------*/

	.detail_section h4.line{
		font-size: 20px;
	}

	/*-------------------------------------
		Cont_lr
	-------------------------------------*/

	.cont_lr > .image iframe{
		min-height: 350px;
	}

	/*-------------------------------------
		Income
	-------------------------------------*/

	#income dl dt{
		background-color: #EEE;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 14px;
	}


	/*-------------------------------------
		Access
	-------------------------------------*/

	#access h4{
		margin-bottom: 30px;
	}

	#access p{
		font-size: 14px;
	}

}

@media screen and (max-width: 480px) {

}


/*-------------------------------------
	page_link
-------------------------------------*/


	.sur{
		max-width: 900px;
		margin: auto;
	}
	.sur article{
		margin-bottom: 70px;
	}
.sur article p{
	margin-top: 20px;
	margin-bottom: 20px;
}
	.sur article h3{
	border: solid 1px #000;
		padding: 2%;
		display: block;
		font-size: 20px;
		font-weight: bold;
	}
.sur article ul{
	background: #eee;
	padding: 2%;
}
.sur article li{
		font-size: 18px;
}


/* ========================================
	table
======================================== */


.table01    { width: 100%; }
.table01  th, .table01 td  {   padding: 20px 15px;border: 1px solid #ddd; vertical-align: top;}
.table01  th  {    background: #EEE;}
.table01  th, .table01 td  { width: 20%; text-align: left; }
.table01 td{width: 80%;}
@media screen and (max-width: 768px) {
   .table01 { margin: auto; width: 100%; }
    .table01 tr {
        display:block;
        margin-bottom: 10px;
        width: 100%;
    }
    .table01 th {
        display:block;

     padding: 10px 0px 10px 10px;

    }
    .table01 td {
             padding: 20px 15px;
        width: 90%;
        margin-left: 15%;
        border:none;
    }
  .table01 textarea{
    width: 100%;
  }
  .table01 th, .table01 td {
      width: auto;;
      text-align: left;
  }
  }
@media screen and (max-width: 400px) {
  .table01 { margin: auto; width: 100%; }
 .table01 tr {
     display:block;
     margin-bottom: 10px;
 }
 .table01 th {
     display:block;
     width: 97%;
  padding: 10px 0px 10px 10px;
 }
 .table01 td {
          padding: 10px 0px 10px 10px;
     width: 90%;
     margin-left: 15%;
     } }