@charset "UTF-8";


/* お友達キャンペーン 2013/11/25
------------------------------------------------------------------------- */
#friendBlock {
	margin-top: 20px;
	margin-bottom: 20px;
	background: #fff;
	font-size: 13px;
}
#friendBlock .pageTtlArea {
	background: url(./img/common/bg_orange.jpg) repeat;
	width: 100%;
	position: relative;
	margin-top: 12px;
	padding: 2px 0;
	border-top: 2px solid #424242;
	border-bottom: 2px solid #424242;
}
.pageTtlArea h2 {
	padding: 17px 12px;
	border-top: 1px dashed #424242;
	border-bottom: 1px dashed #424242;
}

/* お友達 */
.aboutFriend {
	padding: 25px 0;
	border-bottom: 2px dotted #888;
}

/* とは？ */
.whatFriend {
	/* width: 634px; */
	width: auto;
	padding: 20px 33px;
}
.whatFriend p {	line-height: 1.8;}
.whatFriend span { background: #e9b904;}


/* 紹介の特典 */
.tokuFriend li,.tokuFriend ul,.tokuFriend img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.tokuFriend li { float: left;}


/* 紹介方法 */
.howFriend li { float: left; padding-right: 6px;}
.howFriend ul {	margin-right: -6px;}
.howFriend {
	width: 665px;
	margin: 0 auto;
}


/* 紹介システム */
.systemFriend table {
	width: 600px;
	margin: 0 auto;
	text-align: center;
}
.systemFriend .tableBg td {
	background: #f4eed9;
}
.systemFriend td{
	padding: 5px 0;
	vertical-align: middle;
}
.systemFriend .tableTtl th {
	padding: 8px 0;
	font-size: 14px;
	vertical-align: middle;
	font-weight: bold;
	background: #21a287;
	color: #fff;
}
.systemFriendExa {
	background: #f4eed9;
	width: 560px;
	margin: 15px auto 0;
	padding: 15px 20px;
}
.systemFriendExa .col1 strong {
	font-weight: bold;
	margin-right: 1em;
	line-height: 1.8;
	float: left;
}
.systemFriendExa .col2 {
	float: left;
	line-height: 1.8;
}


/* 注意事項 */
.alertFriend {
	width: 600px;
	margin: 0 auto;
	padding: 75px 0 30px;
	font-size: 11px;
}
.alertFriend strong {
	font-weight: bold;
}
.alertFriend li {
	list-style: disc inside;
}







.mauto {
	margin: 0 auto;
	display: block;
}

/* NEWデザイン 2019/4/8
------------------------------------------------------------------------- */
.bitomo_flow{
	text-align: center;
	margin: 15px 0;
}

.bitomo_flow img{
	width: 60%;
}

.privilege{
	text-align: center;
	width: 93%;
	margin: 10px auto;
}

.privilege_number{
	background-color: #00b5e3;
	padding: 5px;
	color: #FFF;
	font-size: 25px;
	font-weight: bold;
	border-radius: 3px 3px 0 0;
	letter-spacing: 15px;
}

.privilege_content{
	background-color: #F4EED9;
	padding: 10px;
	border-radius: 0 0 3px 3px;
}

.privilege_content::after{
	content: "";
  clear: both;
  display: block;
}

.privilege_content_left{
	float: left;
	width: 70%;
	margin-top: 10px;
}

.privilege_content p{
	font-size: 12px;
	margin-top: 5px;
}

.privilege_text{
	font-size: 21px;
}

.privilege_text span{
	color: #00b5e3;
	font-weight: bold;
}

.privilege_textmain{
	color: #FBAE17;
	font-size: 29px;
	font-weight: bold;
	line-height: 1.2;
}

.privilege_textmain span{
	font-size: 47px;
}

.sarani{
	text-align: center;
	font-size: 26px;
	font-weight: bold;
	margin: 10px 0;
}

.triangle{
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #CCC;
	margin: auto;
}

.graph img{
	/* width: 150px; */
	/* margin-top: 35px; */
}

.only{
	font-size: 25px;
	text-align: center;
}

.only span{
	color: #00b5e3;
	font-weight: bold;
}

.yellow_border{
	font-size: 46px;
	background: linear-gradient(transparent 70%, yellow 70%);
}

.dashed_border{
	border-bottom: dashed 1px;
	font-size: 11px;
	text-align: center;
	width: 93%;
	margin: 25px auto 15px;
}

.membership_color{
	text-align: center;
	margin: 10px 0;
}

.membership_color_text{
	margin: 10px 0;
}

.membership_color_text span{
	font-size: 26px;
}

.membership_color img{
	width: 300px;
}

.method{
	border: solid 1px gray;
	text-align: center;
	margin: 40px auto 0;
	border-radius: 3px;
	width: 80%;
}

.method_title{
	background-color: gray;
	color: #FFF;
	padding: 5px;
	font-size: 15px;
	font-weight: bold;
}

.method_btn{
	font-weight: bold;
	width: 93%;
	margin: auto;
	padding: 5px 0;
}

.method_btn::after{
	content: "";
  clear: both;
  display: block;
}

.method_mail, .method_blog, .method_social{
	background-color: #C7A867;
	border-bottom: solid 3px #AE8B44;
	color: #FFF;
	padding: 5px 15px;
	float: left;
	margin: 5px;
	border-radius: 3px;
}

.social{
	font-weight: normal;
}

.alertFriend {
	padding-top: 30px;
}