/*----------------------------------------------------------------------*/
/*マイル機能--------------------------------------------------------------*/
/*----------------------------------------------------------------------*/

#mile{
	overflow: hidden;
	margin: 0;
	padding: 60px 0 70px 0;

}

#mile .mileNow{
	width: 50%;
	margin:  0 auto 15px auto;
	padding: 15px;
	/*border-bottom: 1px solid #e6e6e6;*/
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.5);
}

#mile .mileNow h2{
	margin: 0;
	padding: 0;
	border: none;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: none;
}


#mile .mileDisplay{
	position: relative;
	/*width: 70%;*/
	margin: 0 auto 5px auto;
	padding: 5px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	font-size: 1.0rem;
	font-weight: normal;
	text-align: right;
	background: #fafafa;
}

.mileDisplay::before{
	position: absolute;
	top: 48%;
	left: 5px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	content: "";
	background: url(/img/www/wa/img/ic_mile.png) no-repeat;
	background-size: contain;
}

#mile .charge{
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
}


#mile .paidDisplay{
	display: table;
	box-sizing: border-box;
	width: 49%;
	margin: 0 1% 0 0;
	padding: 3px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background: rgba(255, 255, 255, 1.0);
}

#mile .freeDisplay{
	display: table;
	box-sizing: border-box;
	width: 49%;
	margin: 0 0 0 1%;
	padding: 3px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background: rgba(255, 255, 255, 1.0);
}

#mile .paidDisplay dt{
	display: table-cell;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/*border: 1px solid #fff;*/
	/*border-radius: 6px;*/
	font-size: 0.8rem;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	color: #000;
	/*background: rgba(255, 255, 255, 0.5);*/
}

#mile .freeDisplay dt{
	display: table-cell;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/*border: 1px solid #fff;*/
	/*border-radius: 6px;*/
	font-size: 0.8rem;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	color: #000;
	/*background: rgba(255, 255, 255, 0.5);*/
}

#mile .paidDisplay dd{
	display: table-cell;
	margin: 0;
	padding: 0;
	/*border: 1px solid #fff;*/
	/*border-radius: 6px;*/
	font-size: 0.8rem;
	font-weight: normal;
	text-align: right;
	vertical-align: middle;
	color: #000;
	/*background: rgba(255, 255, 255, 0.5);*/
}

#mile .freeDisplay dd{
	display: table-cell;
	margin: 0;
	padding: 0;
	/*border: 1px solid #fff;*/
	/*border-radius: 6px;*/
	font-size: 0.8rem;
	font-weight: normal;
	text-align: right;
	vertical-align: middle;
	color: #000;
	/*background: rgba(255, 255, 255, 0.5);*/
}

#mile .note h2{
	margin: 0;
	padding: 5px 0 5px 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	/*background: rgba(255,255,255,0.6);*/
}

#mile .note ul{
	list-style: none;
	margin: 0;
	padding: 15px 2% 15px 2%;
}

#mile .note ul li{
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	text-align: left;
	color: #fff;
}

#mile .mileChange h2{
        margin: 0;
        padding: 5px 0 5px 0;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        font-size: 1rem;
        font-weight: 700;
        text-align: center;
        color: #fff;
        /*background: rgba(255, 255, 255, 0.6);*/
}

#mile .mileChange ul{
	list-style: none;
	margin: 0;
	padding: 15px 2% 15px 2%; 
	color: #fff;
}

#mile .mileCount ul li{width: 300px;}


#mile button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

#mile .btn_wrap{
	width: 30%;
	margin: 0 auto 0 auto;
	padding: 0;
}

#mile .btn_exchange{
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 5px;
	/*border: 3px solid #fff;*/
	border-radius: 50px;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
	color: #fff;
	background: #fd0dab;
}

/*確認*/


#mile .mileCheck{
	margin: 0;
	padding: 0;
}

#mile .mileCheck h2{
	margin: 0;
	padding: 5px 0 5px 0;
	border-top: 1px solid #fff;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	color: #f7738a;
	background: rgba(255,255,255,0.6);
}

#mile .mileCheck_top{
	margin: 0;
	padding: 15px 0 15px 0;
	border-top: 1px dotted #fff;
	border-bottom: 1px dotted #fff;
	/*background: rgba(255, 255, 255, 0.5);*/
}

#mile .mileCheck_top dt{
	margin: 0;
	padding: 0 15px 0 15px;
	font-size: 1.0rem;
	font-weight: 700;
	text-align: left;
	color: #fff;
}

#mile .mileCheck_top dd{
	margin: 0;
	padding: 0 15px 0 15px;
	font-size: 1.0rem;
	/*font-weight: 700;*/
	text-align: left;
	color: #fff;
}

#mile .mileCheck_bottom{
	margin: 0 0 20px 0;
	padding: 15px 0 15px 0;
	/*border-top: 1px dotted #e6e6e6;*/
	border-bottom: 1px dotted #fff;
	/*background: rgba(255, 255, 255, 0.5);*/
}

#mile .mileCheck_bottom dt{
	margin: 0;
	padding: 0 15px 0 15px;
	font-size: 1.0rem;
	font-weight: 700;
	text-align: left;
	color: #fff;
}

#mile .mileCheck_bottom dd{
	margin: 0;
	padding: 0 15px 0 15px;
	font-size: 1.0rem;
	/*font-weight: 700;*/
	text-align: left;
	color: #fff;
}

#mile .mileConfirm{
	display: flex;
	box-sizing: border-box;
	width: 84%;
	margin: 0 auto 0 auto;
	padding: 10px;
	border-radius: 12px;
	/*background: rgba(255, 255, 255, 0.5);*/
}


#mile .btn_wrap_l{
	width: 48%;
	margin: 0 2% 0 0;
	padding: 0;
}	


#mile .btn_wrap_r{
	width: 48%;
	margin: 0 0 0 2%;
	padding: 0;
}	

#mile .btn_back{
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 5px;
	/*border: 3px solid #fff;*/
	border-radius: 8px;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
	color: #fff;
	background: #cacaca;
}

#mile .btn_confirm{
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 5px;
	/*border: 3px solid #fff;*/
	border-radius: 8px;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
	color: #fff;
	background: #fd0dab;
}

/*終了*/

#mile .text{
	/*width: 100%;*/
	margin: 0 0 15px 0;
	padding: 0;
	/*border: 3px solid #fff;*/
	/*border-radius: 50px;*/
	font-size: 1.0rem;
	font-weight: normal;
	text-align: center;
	color: #fff;

}

#mile .btn_end{
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 5px;
	/*border: 3px solid #fff;*/
	border-radius: 50px;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
	color: #fff;
	background: #fd0dab;
}


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

#mile{
	margin: 0;
	padding: 154px 0 70px 0;

}

#mile .mileNow{
	width: 50%;
	margin:  0 auto 15px auto;
	padding: 15px;
	/*border-bottom: 1px solid #e6e6e6;*/
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.5);
}



#mile .btn_exchange{
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 5px;
	border: 3px solid #fff;
	border-radius: 50px;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
	color: #fff;
	background: #ff98b8;
}

/*確認*/

#mile .mileConfirm{
	display: flex;
	box-sizing: border-box;
	width: 50%;
	margin: 0 auto 0 auto;
	padding: 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.5);
}

}/*END*/