@charset "UTF-8";
/* お友達紹介キャンペーン 2021/03 */
#friend * {
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",  "ＭＳ ゴシック", "MS Gothic", sans-serif;
	font-feature-settings: "palt";
}

#friend {
	max-width: 755px;
	width: auto;
	margin: 0 auto;
	padding: 0;
	color: #222;
}

#friend div,
#friend p,
#friend span,
#friend h1,
#friend h2,
#friend h3,
#friend ul,
#friend li,
#friend a {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
}

#friend .header {
	margin: 0 auto 10%;
}

#friend .header img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

#friend .catch {
	margin: 0 auto 10%;
	font-size: 3.7vw;
	font-weight: bold;
	letter-spacing: .15em;
	line-height: 2;
	text-align: center;
}
@media screen and (min-width: 960px) {
	#friend .catch {
		font-size: 16px;
	}
}
#friend .point {
	max-width: 800px;
	width: 83.33%;
	margin: 0 auto;
}

#friend .pointup_text {
	margin: -5% 0 8% 0;
	color: #f00000;
	font-size: 4vw;
	font-weight: bold;
	text-align: center;
}
@media screen and (min-width: 960px) {
	#friend .pointup_text {
		font-size: 14px;
	}
}
#friend .point_wrap {
	max-width: 800px;
	width: auto;
	margin: 0 auto;
	flex-wrap: wrap;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#friend .point_character {
	max-width: 368px;
	width: 46%;
	margin: 0 auto;
}

#friend .point_name {
	background: #129a68;
	color: #fff;
	font-size: 3.1vw;
	font-weight: bold;
	letter-spacing: .12em;
	margin: 0 auto 7%;
	padding: 6.9% 0;
	text-align: center;
}
@media screen and (min-width: 960px) {
	#friend .point_name {
		font-size: 15px;
	}
}
#friend .point_name.orange {
	background: #feac0f;
}

#friend .point_img {
	margin: 0 auto 18%;
}

#friend .point_img img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

#friend .point_text {
	font-size: 3.1vw;
	font-weight: bold;
	letter-spacing: .14em;
	line-height: 2;
	margin: 0 auto 15%;
}

@media screen and (min-width: 960px) {
	#friend .point_text {
		font-size: 14px;
		margin: 0 auto 5%;
	}
}
#friend .point_text .green {
	color: #129a68;
}

#friend .point_text .orange {
	color: #feac0f;
}

#friend .point_btn {
	max-width: 800px;
	width: auto;
	margin: 0 auto 17%;
}
@media screen and (min-width: 960px) {
	#friend .point_btn {
		width: auto;
		margin: 0 auto 10%;
	}
}
#friend .point_btn a {
	position: relative;
	color: #fff;
	display: block;
	background: #fb8f22;
	padding: 5% 0;
	font-size: 3.7vw;
	font-weight: bold;
	letter-spacing: .15em;
	text-align: center;
	border-radius: 4px;
}

#friend .point_btn a:before {
	content: "";
	border: .3em solid transparent;
	border-left: .3em solid #fff;
	position: absolute;
	right: 4%;
	bottom: 37%;
	z-index: 2;
}
@media screen and (min-width: 960px) {
	#friend .point_btn a {
		padding: 2% 0;
		font-size: 16px;
	}
	#friend .point_btn a:before {
		content: "";
		border: .5em solid transparent;
		border-left: .6em solid #fff;
		position: absolute;
		right: 4%;
		bottom: 37%;
		z-index: 2;
	}
}
#friend .howto {
	position: relative;
	background: #f1f8e6;
	margin: 0 auto 11%;
	padding: 10% 0 6%;
}

#friend .howto_title {
	max-width: 233px;
	width: 24.27%;
	margin: 0 auto 10%;
}

#friend .howto_title img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

#friend .howto_deco {
	max-width: 180px;
	width: 18.75%;
	position: absolute;
	right: 6%;
	top: -2%;
}

#friend .howto_deco img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

#friend .howto_step {
	position: relative;
	width: auto;
	margin: 0 auto;
}

#friend .howto_step img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

#friend .howto_subtitle {
	position: relative;
	background: #82be27;
}

#friend .howto_subtitle img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

#friend .howto_title_step {
	position: absolute;
	left: 5%;
	top: 41%;
	max-width: 120px;
	width: 12.5%;
}
@media screen and (min-width: 960px) {
	#friend .howto_title_step {
		width: 9%;
	}
}
#friend .howto_title_text {
	color: #fff;
	font-size: 3.7vw;
	font-weight: bold;
	letter-spacing: .2em;
	line-height: 1;
	padding: 4% 0 4% 21%;
}
@media screen and (min-width: 960px) {
	#friend .howto_title_text {
		font-size: 15px;
	}
}
#friend .howto_content {
	max-width: 864px;
	width: 90%;
	margin: 4% auto 2.8%;
	flex-wrap: wrap;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	align-items: center;
}
@media screen and (min-width: 960px) {
	#friend .howto_content {
			margin: 2% auto 1%;
	}
}
#friend .howto_content.top {
	align-items: flex-start;
}

#friend .howto_icon {
	max-width: 84px;
	width: 10.8%;
	margin: 0 7.7% 0 0;
}

#friend .howto_icon img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

#friend .howto_text {
	margin: 0;
	font-size: 3.4vw;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.8;
}
@media screen and (min-width: 960px) {
	#friend .howto_text {
		font-size: 14px;
	}
}
#friend .howto_text.top {
	margin: 0 0 3%;
}

#friend .howto_extra {
	width: 80%;
	margin: -3% 0 2.5% 19%;
	font-size: 3.4vw;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .15em;
}

#friend .howto_extra span {
	color: #fb8f22;
}

#friend .howto_text.bottom {
	width: 80%;
}

#friend .howto_note {
	width: 80%;
	margin: 0 0 2.5% 17%;
	font-size: 2.8vw;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .15em;
}
@media screen and (min-width: 960px) {
	#friend .howto_note {
		font-size: 12px;
	}
}
#friend .btnlist {
	max-width: 800px;
	width: 83.33%;
	margin: 0 auto 12%;
}

#friend .btnlist li {
	width: auto;
	margin: 0 auto 5%;
	border: solid .2em #82be27;
	border-radius: 5px;
	text-align: center;
}

#friend .btnlist li a {
	position: relative;
	display: block;
	padding: 3.4% 0;
	color: #82be27;
	background: #fff;
	font-size: 3.4vw;
	font-weight: bold;
	letter-spacing: .15em;
}

@media screen and (min-width: 960px) {
	#friend .btnlist li a {
		font-size: 15px;
	}
}

#friend .btnlist li a:before {
	content: "";
	border: .3em  solid transparent;
	border-left: .3em solid #82be27;
	position: absolute;
	right: 4%;
	bottom: 37%;
	z-index: 2;
}

@media screen and (min-width: 960px) {
	#friend .btnlist li a:before {
		content: "";
		border: .5em solid transparent;
		border-left: .6em solid #82be27;
		position: absolute;
		right: 4%;
		bottom: 37%;
		z-index: 2;
	}
}

#friend .btn_friend {
	max-width: 800px;
	width: 83.33%;
	margin: 0 auto 13%;
}

#friend .btn_friend a {
	position: relative;
	display: block;
	padding: 5% 0;
	border-radius: 5px;
	background: #fb8f22;
	color: #fff;
	font-size: 3.7vw;
	font-weight: bold;
	letter-spacing: .15em;
	text-align: center;
}

@media screen and (min-width: 960px) {
	#friend .btn_friend a {
		padding: 3% 0;
		font-size: 15px;
	}
}

#friend .btn_friend a:before {
	content: "";
	border: .3em  solid transparent;
	border-left: .3em solid #fff;
	position: absolute;
	right: 4%;
	bottom: 39%;
	z-index: 2;
}
@media screen and (min-width: 960px) {
	#friend .btn_friend a:before {
		content: "";
		border: .5em solid transparent;
		border-left: .6em solid #fff;
		position: absolute;
		right: 4%;
		bottom: 39%;
		z-index: 2;
	}
}
#friend .roboto {
	font-family: Roboto;
	letter-spacing: 0.12em;
}

#friend .roboto_num {
	font-family: Roboto;
	letter-spacing: 0;
}