@charset "UTF-8"; 
/*
Style: メール会員のご案内 css
Version: 1.0.0
Update: 2019-02-27
*/
 
/*--- メール会員のご案内 ---*/ 
	 
.content-inbox { 
	margin: 0 40px;
}
	 
.content-inbox > li { 
	position: relative;
	margin-top: 20px;
	padding: 30px;
	text-align: left;
	overflow: hidden;
	background-color: #fff;
}
	
.heading { 
	margin: -30px -30px 30px;
	padding: 10px 30px;
	font-size: 125%;
	font-weight: 700;
	line-height: 1;

	color: #fff;
	background-color: #4b5064;
}
  
/* メール会員について */ 
	 
.mailMemberPointHeading { 
	padding: 20px 0 10px;
	font-size: 125%;
	font-weight: 700;
}
 
.mailMemberPointList { 
	margin-bottom: 10px;
	padding: 10px;
	padding-right: 130px;
	background: url(../img/mail/mail_icon.png) no-repeat;
	background-position: right 10px center;
	background-color: #ecf0f5;
}
	 
.mailMemberPointList li { 
	padding: 4px 0;
	font-size: 90%;
	font-weight: 700;
	padding-left: 1em;
	text-indent: -1em;
}
  	
.mailMemberAttention { 
	color: #dc0000;
	font-size: 75%;
	padding-left: 1em;
	text-indent: -1em;
}
  
/* 登録方法 */ 
	
.mailMemberRegisterFlow { 
}
	
.mailMemberRegisterFlow li { 
	position: relative;
	margin-bottom: 20px;
	padding: 20px;
	padding-left: 80px;
	overflow: hidden;
	background-color: #c8dff5;
}
	 
.mailMemberRegisterFlow li::before { 
	position: absolute;
	top: 50%;
	left: 30px;
	z-index: 101;
	transform: translateY(-50%) translateX(-50%);

	color: #fff;
	font-size: 125%;
	font-weight: bold;
}
.mailMemberRegisterFlow li:nth-child(1)::before { content: '1'; }
.mailMemberRegisterFlow li:nth-child(2)::before { content: '2'; }
.mailMemberRegisterFlow li:nth-child(3)::before { content: '3'; }
.mailMemberRegisterFlow li:nth-child(4)::before { content: '4'; }

.mailMemberRegisterFlow li::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 60px;
	height: 100%;
	background-color: #4b509b;
}
 
.mailMemberRegisterFlow a.mobiUrl { 
	color: #000;
	text-decoration: none;
}
 
.mailMemberRegisterFlow .QRcode { 
	float: right;
	width: 90px;
}
 
.mailMemberRegisterFlow .exp { 
	padding-top: 0.5em;
	padding-left: 1em;
	text-indent: -1em;
}
   
.mailMemberRelease { 
	position: relative;
	padding: 10px 20px;
	padding-left: 140px;
	overflow: hidden;
}
	
.mailMemberReleaseHeading { 
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 100%;
	border: 1px solid #000;
}
	 
.mailMemberReleaseHeading span { 
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	transform: translateY(-50%);
}
  
.mailMemberRelease a { 
	color: #000;
	font-weight: 700;
}
     
@media screen and (max-width: 900px) { 
	 
.content-inbox { 
	margin: 0 10px;
}
 
} 
  
@media screen and (max-width: 767px) { 
	 
.content-inbox { 
	margin: 0 10px 20px;
}
	 
.content-inbox > li { 
	padding: 15px;
	font-size: 85%;
}
	
.heading { 
	margin: -15px -15px 15px;
	padding: 10px 15px;
	font-size: 110%;
}
  
/* メール会員について */ 
	
.mailMemberPointHeading { 
	padding: 15px 0 10px;
	font-size: 110%;
}
 
.mailMemberPointList { 
	padding: 10px;
	background-position: right 10px bottom 10px;
	background-size: 60px 45px;
}
  
/* 登録方法 */ 
	 
.mailMemberRegisterFlow { 
}
	
.mailMemberRegisterFlow li { 
	margin-bottom: 10px;
	padding: 10px;
	padding-left: 50px;
}
	 
.mailMemberRegisterFlow li::before { 
	left: 20px;
	font-size: 125%;
}
.mailMemberRegisterFlow li:nth-child(1)::before { content: '1'; }
.mailMemberRegisterFlow li:nth-child(2)::before { content: '2'; }
.mailMemberRegisterFlow li:nth-child(3)::before { content: '3'; }
.mailMemberRegisterFlow li:nth-child(4)::before { content: '4'; }

.mailMemberRegisterFlow li::after {
	width: 40px;
}
 
.mailMemberRegisterFlow .QRcode { 
	width: 64px;
}
   
.mailMemberRelease { 
	padding: 5px 10px;
	padding-left: 110px;
}
	 
.mailMemberReleaseHeading { 
	width: 100px;
}
    
}