/*======= Area =======*/
body.mypage .ec-mypageRole,
body.other_page .ec-contactRole
{
	max-width:1060px;
}

body.other_page .ec-contactRole{
	padding:0 26px;
}

.ec-layoutRole__main .l_mypage_navi_area{
	width:250px;
}

.ec-layoutRole__main .l_mypage_content_area{
	width:calc(100% - 250px);
	padding-bottom: 100px;
}


/*======= guid =======*/
.l_mypage_guid{
	font-weight: 400;
	font-size: 14px;
	color: #333333;
}


/*======= grid =======*/
/*----- grid -----*/
.l_mypage_grid {
	width:100%;
	margin-bottom:20px;
}

.l_mypage_grid dl{
	display: flex;
	border-bottom: 0;
	margin-bottom: 20px;
	flex-wrap: wrap;
	
	-webkit-flex-direction:column;
	-moz-flex-direction:column;
	flex-direction:column;
}

.l_mypage_grid dl dt,
.l_mypage_grid dl dd
{
	width:100%;
}

.l_mypage_grid.l_grid_confirm dl{
	border-bottom:1px solid #DDD;
	padding: 10px 0;
}

.l_mypage_grid.l_grid_confirm dl dt label{
	font-size: 14px;
	font-weight:400;
	color: #969696;
}


/*----- form -----*/
.l_mypage_grid dl dd input[type="text"],
.l_mypage_grid dl dd input[type="tel"],
.l_mypage_grid dl dd input[type="email"],
.l_mypage_grid dl dd input[type="password"],
.l_mypage_grid dl dd select,
.l_mypage_grid [class^="ec-zipInput"] input
{
	height:50px;
	margin-bottom:0;
	background: #FFF;
}

.l_mypage_grid dl dd label{
	margin:0 10px;
}

.l_mypage_grid .ec-select{
	margin-bottom:0;
}

.l_mypage_grid .ec-required{
	font-size:18px;
	margin-left:5px;
}

.l_mypage_grid .ec-zipInputHelp
{
	margin-bottom:0;
}

.l_mypage_grid .ec-input textarea{
	height:150px;
	resize:none;
	overflow:auto;
	width:100%;
}

@media screen and (max-width:767px){
	
	.ec-layoutRole__main .l_mypage_navi_area{
		display:none;
	}
	.ec-layoutRole__main .l_mypage_content_area{
		width:100%;
	}
}


/*----- btn -----*/
/*--- action ---*/
.l_mypage__action,
a.l_mypage__action
{
	width:100%;
	height: 60px;
	color:#FFF;
	border:none;
	background: #008C6B;
	border-radius: 5px;
	position:relative;
	text-align:center;
}

.l_mypage__action:hover{
	background: #0B6852;
	color:#FFF;
}

.l_mypage__action:before {
	content:"";
	display:block;
	position:absolute;
	z-index:5;
	top:23px;
	right:20px;
	width:10px;
	height:15px;
	background:url('../img/icon2/caret_r.svg');
	background-repeat:no-repeat;
}


a.l_mypage__action{
	line-height:60px;
	display:block;
	font-weight:400;
}

a.l_mypage__action{
	text-decoration:none;
}


/*--- back ---*/
.l_mypage_back{
	font-weight:400;
	font-size: 16px;
	color: #969696;
	cursor:pointer;
	padding-left:20px;
	position:relative;
}

.l_mypage_back::before{
	content:"";
	display:block;
	position:absolute;
	z-index:5;
	top:5px;
	left:0px;
	width:10px;
	height:16px;
	background:url('../img/icon2/caret_l_969696.svg');
	background-repeat:no-repeat;
}


/*----- link -----*/
a.l_mypage_link{
	text-decoration:none;
	color: #969696;
}

a.l_mypage_link:hover{
	color: #666666;
}

.l_mypage_link .l_link__icon{
	display:inline-block;
	width:12px;
	height:12px;
	background:#969696;
	margin-right:20px;
	mask: url("../img/icon2/caret_l_969696.svg") no-repeat center center / contain;
	-webkit-mask: url("../img/icon2/caret_l_969696.svg")) no-repeat center center / contain;
}

.l_mypage_link:hover .l_link__icon{
	background:#666666;
}


/*======= contact =======*/
.l_contact_message{
	margin-bottom:50px;
}

.l_contact_message p{
	margin:0;
}

.l_contact_message .l_message__notice{
	font-size: 12px;
	color: #969696;
	margin-top:10px;
}


/*======= alert =======*/
.l_mypage_alert,
.l_login_alert{
	background:#F25938;
	color:#FFF;
	
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:60px;
	z-index:5;
}

.l_mypage_alert.l_notice,
.l_login_alert.l_notice{
	background:#008C6B;
}

.l_mypage_alert .l_inner,
.l_login_alert .l_inner{
	padding:20px 10px;
	line-height:20px
}

.l_mypage_alert .l_inner p,
.l_login_alert .l_inner p{
	text-align:left;
}

.l_alert_icon {
	height:14px;
	display:inline-block;
}

.l_alert_icon img{
	width:100%;
	height:100%;
}

.l_alert_close{
	float:right;
	cursor:pointer;
}
	