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

#mile{
	overflow: hidden;
	margin: 0;
	padding: 87px 0 150px 0;

}

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

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


#mile .mileDisplay{
	position: relative;
	/*width: 70%;*/
	margin: 0 auto 5px auto;
	padding: 5px;
	border: 1px solid #dcdcdc;
	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/mile.png) no-repeat;
	background-size: contain;
}

#mile .charge{
	display: table;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 3px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	background: #fafafa; /*rgba(255, 255, 255, 1.0);*/
}

#mile .charge 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: left;
	vertical-align: middle;
	color: #000;
	/*background: rgba(255, 255, 255, 0.5);*/
}

#mile .charge 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: 10px 0 10px 0;
        border-top: 1px dotted #9b86bf;
        border-bottom: 1px dotted #9b86bf;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	color: #d9c5ff; /*#f7738a*/
	/*background: rgba(174, 131, 214, 1);*/
}

#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; /*#000*/
}

#mile .mileChange h2{
        margin: 0;
        padding: 10px 0 10px 0;
        border-top: 1px dotted #9b86bf;
        border-bottom: 1px dotted #9b86bf;
        font-size: 1rem;
        font-weight: 700;
        text-align: center;
 	color: #d9c5ff; /*#f7738a*/
	/*background: rgba(174, 131, 214, 1);*/
}

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

#mile .mileCount{width: 300px; padding: 0 !important; border: 1px solid #000 !important;}


#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: #ffc000; /*#ff98b8;*/
}

/*確認*/


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

#mile .mileCheck h2{
	margin: 0;
	padding: 5px 0 5px 0;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	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 solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	background: rgba(255, 255, 255, 1.0);
}

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

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

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

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

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

#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: #ffc000; /*#ff98b8;*/
}

/*終了*/

#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; /*#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: #ffc000; /*ff98b8*/
}


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

#mile{
	margin: 0;
	padding: 197px 0 100px 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, 1.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: #ffc000; /*#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*/