@charset "UTF-8";

/* ▼▼▼ フロアガイド
=====================================*/

#floor_guide{
	background:#FDFAF2;
	padding-top: 0;
	}
#tab_box{
	background: #EDE8DF;
	padding-top: 50px;
	}

/* タブ */
.tab_wrap{
    text-align: center;
	}
	.tab_wrap input[type="radio"]{
		display:none;
		}
	.tab_area{
	    display: inline-block;
	    width: 100%;
	    text-align: center;
	    }
	.tab_area li{
		min-width: 480px;
		width:30%;
		display:inline-block;
		background:#fff;
		border-radius: 5px 5px 0 0 / 5px 5px 0 0;
		box-shadow:0px -7px 7px -1px #eee inset;
		text-align:center;
		font-size:18px;
		cursor:pointer;
		transition:ease 0.2s opacity;
		position: relative;
		}
	.tab_area li:not(:first-child){
		margin-left: 10px;
		}
	.tab_area label{
		display: block;
	    text-align: center;
	    padding:10px 0;
	    cursor: pointer;
		}

.panel_area{
	}
	#panel1,#panel2{background:#FDFAF2;}
	.panel_area img{
		width: 100%;
		}
	.tab_panel{
		display:none;
	    text-align: center;
		padding: 30px 0 0;
		}

#tab1:checked ~ .tab_area .tab1_label{box-shadow:none;background:#FDFAF2; color:#000;font-weight: bold;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{box-shadow:none;background:#FDFAF2; color:#000;font-weight: bold;}
#tab2:checked ~ .panel_area #panel2{display:block;}


.floor_list{
	max-width: 1000px;
	margin: 0 auto;
	}
	.floor_list li{
		border-bottom: 1px solid #ccc;
		position: relative;
		}
	.floor_list li a:after{
		content: "\f105";
		font-family: FontAwesome;
		position: absolute;
		top: 35.5%;
		line-height: 1;
		right: 20px;
		font-size: 20px;
		}
	.floor_list li a{
		display: block;
		padding: 20px;
		}
	.floor_list li p{
		position: relative;
		}
	.floor_list li p:nth-child(2){
		padding:0   4em;
		}
	.floor_list li .floor_no{
		float: left;
/* 		width: 4em; */
		font-weight: bold;
		}
	.btn_2{
		margin: 50px auto;
		}
	#main .more_btn:after{
		right: 10px;
		}

/* 本館 */
.floor_list li .icon{
	position: relative;
	}
	.floor_list li .icon:after{
		content: "";
		width: 89px;
		height: 23px;
		position: absolute;
		top: -7px;
		left: 10px;
		}
	#panel1 .floor_list li:nth-child(10) .icon:after{
		background: url(../img/miores10.svg) no-repeat center/100%;
   		}
	#panel1 .floor_list li:nth-child(11) .icon:after{
		background: url(../img/miores11.svg) no-repeat center/100%;
   		}
/* プラザ館 */
	#panel2 .floor_list li:nth-child(1) .icon:after{
		background: url(../img/marche.svg) no-repeat center/100%;
	    width: 150px;
	    height: 22px;
	    top: -4px;
		left: 0;
   		}
	#panel2 .floor_list li:nth-child(3) .icon:after{
		background: url(../img/floor/mio_eki_loop.png) no-repeat center/100%;
	    width: 300px;
	    height: 25px;
	    top: -10px;
		left: 0;
   		}
   	#panel2 .floor_list li:nth-child(6) .icon:after{
		background: url(../img/miores4.svg) no-repeat center/100%;
		width: 85px;
   		}
.floor_list li.carpark{
	background: #EDE8DF;
	}
	.floor_list li.carpark p:nth-child(2){
		padding-left: 7em;
		}

.btm_bnr_wrap{
    width: 670px;
    max-width: 100%;
    margin: 0 auto 50px;
}
.btm_bnr_wrap a{
    display: block;
}

/* ▼ ディテール */
/* 階数選択 btn */
.floor_btn{
	overflow: hidden;
	padding: 50px 0;
	}
	.floor_btn li{
		float: left;
		display: table;
		background: #fff;
		border-radius: 50%;
		width: 64px;
		height: 64px;
		line-height: 1;
		}
	.floor_btn li:not(:first-child){
		margin-left: 2%;
		}
	.floor_btn li:hover,
	.floor_btn li.active{
		background: #B1A9A9;
		color: #fff;
		}
	.floor_btn li span{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		}
	.floor_btn li span a{
		display: block;
		}
	.floor_btn li:hover a,
	.floor_btn li.active a{
		color: #fff!important;
		opacity: 1!important;
		}

/* ショップリスト */
.list_area{
	background: #fff;
	padding: 50px 20px;
	margin-top: 50px;
	}
	.list_area > ul{
		max-width: 1000px;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-bottom: 50px;
  		}
	.list_area ul li{
		border-bottom: 1px dotted #ccc;
		width: 45%;
		}
	.list_area ul li:nth-child(-n + 2){
		border-top: 1px dotted #ccc;
		}
	.list_area ul li a{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 20px 0;
		}
	.list_area ul li .shop_logo{
		width: 100px;
		height: 70px;
		margin-right: 20px;
		flex-shrink: 0;
		}
	.list_area ul li .txt_box p{
		}
	.detail .more_btn a{
		background: #B4B4B4!important;
		}



/* ================================================================================================*/

/* ▼▼▼ 1024px
=====================================*/
@media screen and (max-width: 1024px) {

}



/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {

/* タブ */
.tab_wrap{
    text-align: center;
	}
	.tab_wrap input[type="radio"]{
		display:none;
		}
	.tab_area{
		width: 100%;
	    padding: 0 10px;
		}
	.tab_area li{
		min-width: 144px;
		width: 48%;
		font-size:14px;
		box-shadow:0px -5px 5px -1px #eee inset;
		}
	.tab_area li:not(:first-child){
		margin-left: 1%;
		}
	.tab_area label{
	    padding:10px 0;
		}

	.tab_panel{
		padding: 0;
		}

/* フロアリスト */
.floor_list{
	max-width: 1000px;
	margin: 0 auto;
	}
	.floor_list li{
		border-bottom: 1px solid #ccc;
		}
	.floor_list li a{
		display: block;
		padding: 20px;
		}
/* 本館 */
.floor_list li .icon:after{
	top: -8px;
	}
	#panel1 .floor_list li:nth-child(10) .icon:after{
		background: url(../img/miores10.svg) no-repeat center/100%;
   		}
	#panel1 .floor_list li:nth-child(11) .icon:after{
		background: url(../img/miores11.svg) no-repeat center/100%;
   		}
/* プラザ館 */
	#panel2 .floor_list li:nth-child(1) .icon:after{
		background: url(../img/marche.svg) no-repeat center/100%;
	    top: -5px;
   		}
	#panel2 .floor_list li:nth-child(3) .icon:after{
		background: url(../img/floor/mio_eki_loop.png) no-repeat center/100%;
	    top: -10px;
   		}
   	#panel2 .floor_list li:nth-child(6) .icon:after{
		background: url(../img/miores4.svg) no-repeat center/100%;
   		}


/* ▼ ディテール */
/* 階数選択 btn */
.floor_btn{
	overflow: hidden;
	padding: 30px 0;
	}
	.floor_btn li{
		font-size: 13px;
		width: 13vw;
		max-width: 55px;
		height: 13vw;
		max-height: 55px;
		line-height: 1;
		}
	.floor_btn li:nth-child(-n + 6){
		margin-bottom: 10px;
		}
	.floor_btn li:not(:first-child){
		margin-left: 2vw;
		}
	.floor_btn li:nth-child(7n){
		margin-left: 0;
		}

/* ショップリスト */
.list_area{
	background: #fff;
	padding: 30px 20px;
	margin-top: 30px;
	}
	.list_area > ul{
		margin-bottom: 30px;
  		}
	.list_area ul li{
		width: 100%;
		}
	.list_area ul li:nth-child(-n + 2){
		border-top: 0px none;
		}
	.list_area ul li:first-child{
		border-top: 1px dotted #ccc;
		}
	.list_area ul li a{
		padding: 20px 0;
		}
	.list_area ul li .shop_logo{
		width: 100px;
		height: 70px;
		margin-right: 20px;
		}
	.list_area ul li .txt_box p{
		font-size: 13px;
		}
}

/* ▼▼▼ 360px
=====================================*/
@media screen and (max-width: 360px) {
.floor_btn li{
	font-size: 11px;
	}
}