@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique&display=swap');
#mile{
	width:calc(100% - 40px);
	max-width:800px;
	margin:0 auto 80px;}
#mile *{
	font-family:'NotoSansCJKjp', sans-serif;
	font-weight:bold;}
.kome{
	position:relative;
	text-align:left;
	padding:0 0 0 10px;}
.kome::after{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	content:'\203b';}
.mile-lead{
	padding:50px 0 30px;}
.mile-lead h2{
	color:#C30173;
	text-align:center;
	font-size:24px;}
.mile-label{
	display:flex;
	align-items:center;
	justify-content:center;
	max-width:800px;
	margin:auto;
	background:#C30173;
	border:1px solid #C30173;
	padding:10px 15px;}
.mile-illust{
	margin:0 10px 0 0;}
.mile-cta{
	max-width:800px;
	margin:auto;
	padding:15px 20px;
	border-left:1px solid #C30173;
	border-right:1px solid #C30173;
	border-bottom:1px solid #C30173;}
.mile-cta p{
	text-align:center;}
.mile-cta p a,
.mile-cta p span{
	color:#000;
	font-weight:bold;
	text-decoration:none;
	font-size:20px;
	transition:0.3s;}
.mile-cta p a{
	color:#0000ff;}
.mile-cta p a:hover{
	text-decoration:underline;}
#note{
	padding:30px 0;}
#note .phone{
	color:#C30173;
	font-weight:bold;
	position:relative;
	display:flex;
	align-items:center;
	font-size:22px;
	justify-content:center;}
#note .phone::before{
	content:"";
	display:block;
	margin:0 5px 0 0;
	width:40px;
	height:40px;
	background-repeat:no-repeat;
	background-image:url(../img/mileone/tel-icon.svg);
	transition:0.3s;}
#note .kome{
	display:table;
	margin:15px auto 0;
	font-size:16px;}
#step .kome{
	font-size:16px;
	padding:0 0 0 18px;}
.step-box{
	padding:20px;
	border:1px solid #C30173;
	margin:0 0 20px;}
.step-box:last-child{
	margin:0;}
.step-title{
	display:flex;
	align-items:center;
	color:#C30173;
	font-size:20px;
	margin:0 0 20px;}
.step-title span.num{
	display:block;
	margin:0 15px 0 0;
	background:#333;
	font-family:"Zen Kaku Gothic Antique", sans-serif!important;
	color:#FFF;
	line-height:1;
	width:45px;
	height:45px;
	font-size:40px;
	text-align:center;}
.step-title span.txt{
	width:calc(100% - 60px);}
.step-operate{
	display:flex;
	justify-content:center;
	align-items:center;}
.step-phone{
	max-width:700px;
	padding:15px 20px;
	border:1px solid #C30173;}
.step-img{
	width:auto;}
.step-shop{
	text-align:center;
	font-size:20px;
	margin:0 0 0 20px;
	font-size:25px;}
.step-shop br{
	display:none;}
.step-tel{
	color:#C30173;
	font-size:32px;
	text-align:center;
	margin:15px 0 0;}
.step-time{
	display:table;
	margin:15px auto 0;}
.step-time span{
	display:block;
	text-align:center;
	font-size:16px;}
.step-bale{
	max-width: 580px;
	margin:auto;}
.step-delivery{
	margin:30px 0;}
.step-delivery p{
	margin:0 0 20px;
	font-size:16px;}
.step-delivery p:last-child{
	margin:0;}
.step-delivery p .tag{
	font-size:20px;
	width:110px;
	margin:0;
	text-align:center;
	display:block;
	background:#C30173;
	color:#FFF;}
.step-line{
	margin:0 0 20px}
.step-line span{
	font-size:16px;
	background:linear-gradient(transparent 64%, #FFF200 0%);
	display:inline;
	padding:2px;}
@media only screen and (min-width:768px){
	#mile{
		margin:0 auto 120px;}
	.mile-lead{
		padding:50px 0 35px;}
	.mile-lead h2{
		font-size:30px;}
	.mile-lead h2 br{
		display:none;}
	.mile-label{
		padding:18px 20px;}
	.mile-illust{
		margin:0 20px 0 0;}
	.mile-cta{
		padding:20px;}
	.mile-cta p a,
	.mile-cta p span{
		font-size:30px;}
	#note{
		padding:40px 0;
		display:flex;
		justify-content:space-between;
		align-items:center;}
	#note .phone{
		font-size:30px;
		justify-content:start;}
	#note .phone::before{
		width:50px;
		height:50px;
		margin:0 10px 0 0;}
	#note .kome{
		font-size:20px;
		margin:0;}
	.step-title{
		font-size:25px;
		margin:0 0 30px;}
	.step-title span.num{
		margin:0 20px 0 0;}
	.step-box{
		padding:40px 45px;
		margin:0 0 50px;}
	.step-phone{
		display:flex;
		align-items:center;
		justify-content:center;}
	.step-shop{
		font-size:20px;
		margin:0 20px;}
	.step-shop br{
		display:block;}
	.step-tel{
		font-size:45px;
		margin:0;}
	.step-time{
		display:inline;
		display:flex;
		align-items:center;
		justify-content:center;}
	.step-time span{
		font-size:20px;}
	.step-time span.label{
		margin:0 50px 0 0;}
	.step-delivery p{
		display:flex;
		align-items:center;
		font-size:20px;}
	.step-delivery p .tag{
		font-size:24px;
		width:138px;
		margin:0 20px 0 0;
		display:inline-flex;
		align-items:center;
		justify-content:center;}
	.step-line{
		margin:0;
		font-size:20px;}
	.step-line span{
		font-size:18px;}
	.step-line br{
		display:none;}
}