.mail-navi{
	display:grid;
	grid-auto-flow:column;
	justify-self: center; /* 蟄撰ｽ懷€句挨繧｢繧､繝?Β縺ｮ讓ｪ菴咲ｽｮ end */
	grid-column-gap:1em;
	align-items: center;
}
.mail-navi li img{
	width:18px;
	height:auto;
}
.mail-navi li{
	display:grid;
	grid-auto-flow:column;
	grid-column-gap:0.3em;
	word-break: keep-all;
}
.mail-navi li span:first-child{
display:inline-block;
width:26px;
height:26px;
text-align:center;
color:#FFF;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;		
}
#on{
	color:var(--maincolor);
}
#on span:first-child{ /* 1  */
display:inline-block;
width:26px;
height:26px;
text-align:center;
color:#FFF;
background-color: var(--maincolor);
border-radius: 50%;	
}

.mail-error{
	padding:1em;
	color:red;
}
input[type=submit].mail-button{/* ﾃδｧﾃつｹﾃつｧﾃδｯﾃつｽﾃつｨﾃδｧﾃつｹﾃつ敕δｯﾃつｽﾃつｩﾃδｧﾃつｹﾃつ敕δｯﾃつｽﾃつｼﾃδｩﾃ｢窶堋ｬﾃ｢竄ｬﾂ｢ﾃδｯﾃつｽﾃつｻﾃδｩﾃつｫﾃつｱﾃδｯﾃつｽﾃつ｢ */
	width:100px;
	height:40px;
	margin:1em;
	border:1px solid rgba(0,0,0,0.3);
	background:#D9F1BC;
	line-height:1;
}
.mail-home a{/* ﾃδｨﾃ?ｾﾃつｳﾃδ･ﾃつｾﾃつ｡ﾃδｯﾃつｽﾃつｺﾃδｯﾃつｿﾃつｽﾃδ･ﾃ銀€?ﾃつ､ﾃδｩﾃつｫﾃつｱﾃδｯﾃつｽﾃつ｢ */
	display:inline-block;
	padding:1em;
	margin-top:1em;
	border:1px solid rgba(0,0,0,0.3);
	background:#D9F1BC;
	border-radius:4px;
}


/* ------------------------------------- */
@media (max-width: 767px) {
.mail-navi li{
	grid-auto-flow:row;
	justify-items: center;
	text-align:center;
}
.mail-navi li span:last-child{
	font-size: 10px;
}
 }