@charset "UTF-8";
/* CSS Document */
main {
/*    margin-top: 117px;*/
}
/*メイン画像*/
.mainv-area .mainv-pc,
.mainv-area .mainv-sp {
    width: 100%;
	margin-top:0;
}
.mainv-area {
    position: relative;
    margin-bottom:0;
	background:url("../images/mainv-bg-pc-min.jpg")no-repeat;
	background-size: cover;
	background-position: bottom;
}
.mainv-area .wrap{
	display: flex;
	justify-content:space-around;

}
.mainv-area .img-box{
	width:40%;
	margin-bottom:45px;
	margin-top:50px;
}
.mainv-area .img-box h1{
	margin-bottom:-30px;
	
}
/*お友達追加で無料プレゼントエリア*/
.point-area{
	width:55%;
	margin-bottom:45px;
	margin-top:50px;
}
.point-area .sec-ttl{
	margin-bottom:-80px;
	z-index:3;
}
.point-area .btn-area a{
	width:80%;
	margin:0 auto;
}
.point-inner{
	width:80%;
	padding:55px 0 0px;
	position:inherit;
	border:solid 2px #2e2e2e;
	background:#fff8de;
	margin:0 auto;
	z-index:2;
	margin-bottom:15px;
}
.point-inner .point-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:5px;
	margin:10px 15px;
	background:#Fff;
	position: relative;
	border:solid 2px #222;
}
.point-inner .point-box:last-child{
	margin-bottom:25px;
}
.cont{
	text-align: center;
	width:80%;
}
.cont p{
	font-weight: bold;
}
.cont strong{
	font-size: 2.3rem;
}
.point-box img{
	width:15%;
}



/*プロフィールエリアエリア*/
.prof-area{
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 80%, rgba(250,228,231,1) 100%);
	padding:60px 0 120px;
}
.prof-area .sec-ttl{
	margin-top:-70px;
	margin-bottom:80px;
}
.prof-box table{
	padding:50px 40px;
	border:solid 2px #222;
	display: block;
	margin-bottom:80px;
	font-weight: bold;
}
.prof-box{
	position: relative;
	width:85%;
	margin:0 auto;
}
.prof-box .deco1{
	top:-4%;
	left:-2%;
	opacity: .8;
}
.prof-box .deco2{
	top:-5%;
	right:-2%;
	transform: rotate(90deg);
}
.prof-box .deco3{
	bottom:-5%;
	left:-2%;
	transform: rotate(-90deg);
}
.prof-box .deco4{
	bottom:-4%;
	right:-2%;
	transform: rotate(-180deg);
	opacity: .8;
}
.prof-box img{
	position: absolute;
}
.prof-box tbody{
	display: block;
	font-size: 2rem;
}
th,td{
	padding:5px 0;
	font-weight: bold;
}
.prof-box .table-ttl{
	width:100%;
	text-align: left;
	margin-bottom:40px
}
tr{
	display: flex;
}
th{
	width:20%;
	text-align: left;
}
td{
	width:80%;
}
.bike-box {
	background: url("../images/bike-pc-min.png")no-repeat;
	background-size: 100% auto;
/*	background-position-x:-15px;*/
	padding:50px;
}
.bike-text{
	text-align: right;
}
.bike-text p{
	margin-bottom:50px;
	font-weight: bold;
	font-size: 3.1rem;
	color:#3d3d3d;
	text-shadow: 0px 0px 7px #fff;
	
}
.sec-sub-ttl p{
/*	padding-bottom:50px;*/
	font-size: 5rem;
	line-height: 1em;
}
.sec-sub-ttl span{
	font-weight: bold;
	font-size: 2.6rem;
}

/*こんなことをはじめます！*/
.pick-area{
	background:#fae4e7;
}
.pick-area .sec-ttl{
	margin-bottom:-70px;
}
.pick-inner{
	background:#fff;
	padding:100px 90px 0;
	margin-bottom:50px;
}
.pick-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom:2px solid #ff9494;
	padding:40px 0;
}
.pick-box:last-child{
	border:none;
	padding-bottom:60px;
}
.pick-box img{
	width:48%;
	height:auto;
}
.pick-item{
	width:48%;
	text-align: center;
	font-size: 2.2rem;
	line-height: 1.8em;
}
.pick-item p{
	font-weight:600;
	line-height: 1.5em;
}
.yellow-bg{
	background:#ffee92;
	font-weight: bold;
	padding:15px 0;
	margin:0 auto 15px;
	font-size: 2.6rem;
	width:80%;
}
.bike-cont{
/*	font-family: "mamelon","Hiragino Sans";*/
	font-family: 'M PLUS Rounded 1c', sans-serif;
	text-align: center;
	color: #222;
	background:#fff;
	border:solid 4px #8d7ec7;
	padding:70px 0;
	font-size: 3rem;
	position: relative;
	margin-bottom:60px;
}
.bike-cont::after{
	position: absolute;
	content:"";
	width:96%;
	height:93%;
	top:3%;
	left:1.8%;
	border:solid 3px #8d7ec7;
}
.bike-cont p{
	font-weight: 500;
	line-height: 1.6em;
	color:#3d3d3d;
}
.pupple{
	color:#8d7ec7;
	font-size: 4rem;
	font-weight: 700;
}
/*今お友達になってもらうと！*/
.flow-area{
	padding-bottom:10px;
	
}
.flow-area .sec-ttl{
	margin:60px 0 100px;
}
.flow-box{
	padding-bottom:130px;
	position: relative;
	text-align: center;
}
.flow-box::after{
	content:"";
	width:125px;
	height:90px;
	position: absolute;
	display: inline-block;
}
.flow-box:nth-child(2)::after{
	background:url("../images/step1-min.png")no-repeat;
	top:-7%;
	right:10%;
}
.flow-box:nth-child(3)::after{
	background:url("../images/step2-min.png")no-repeat;
	top:-7%;
	left:10%;
}
.flow-box:nth-child(4)::after{
	background:url("../images/step3-min.png")no-repeat;
	top:-7%;
	right:10%;
}
.step-left{
	position: absolute;
	bottom:25%;
	left:8%;
}
.step-right{
	position: absolute;
	bottom:25%;
	right:7%;
}
.opt-text{
/*	font-family: "mamelon";*/
	font-family: 'M PLUS Rounded 1c', sans-serif;
	padding-bottom:50px;
	position: relative;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	color:#3d3d3d;
}
.opt-text::before{
	content:"";
	display: inline-block;
	background:url("../images/opt-deco-min.png")no-repeat;
	width:41px;
	height: 28px;
	top:0;
	left:32%;
	position: absolute;
}
.opt-text .red{
	font-size: 4rem;
	font-weight: bold;
}
.flow-area .btn-area{
	margin-bottom:30px;
}
.flow-area .btn-area a{
	width:70%;
	font-size: 4rem;
}
.flow-area .btn-area a::after{
	top:37%;
}
.flow-area .lineicon{
	padding:0 3rem;
	width: 18%;
	
}
.qrcode{
	display: block;
	text-align: center;
	margin:0 auto 50px auto;
}
/*最後に・・・・*/
.messe-area{
	background:#dbc6ff;
}
.messe-area .wrap{
	overflow:inherit;
}
.messe-area .sec-ttl{
	margin-bottom:-40px;
	position: relative;
	z-index: 3;
}
.messe-box{
	background:#fae4e7;
	padding:80px 50px 50px;
	font-size: 2rem;
	line-height: 1.5em;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	position: relative;
	width: 80%;
	margin:0 auto;
}
.sine{
	position: absolute;
	right:5%;
	bottom:-20%;
	width:30%;
}

.messe-box p{
	margin-bottom:20px;
}
.messe-box p:last-child{
	margin-bottom:0;
}

@media screen and (max-width:768px) {
    .mainv-area {
        margin-bottom: 0;
    }
	.cont strong{
		font-size: 1.7rem;
	}
	.bike-box{
		background-size: cover;
	}
	.bike-text p{
		font-size: 2.6rem;
	}
	.pick-item{
		font-size: 1.5rem;
	}
	.yellow-bg{
		font-size: 1.7rem;
	}
	.opt-text::before{
		left:28%;
	}
	.flow-area .btn-area a{
		font-size: 3rem;
	}
    
}
@media screen and (max-width:425px) {
    main {
        margin-top: 0;
    }
	.mainv-area {
		margin-bottom:0;
		background:url("../images/mainv-bg-sp-min.jpg")no-repeat;
		background-size: cover;
		background-position: center;
		padding-bottom:40px;
		display: block;
	}
	.mainv-area .wrap{
		display: block;
	}
	.mainv-area .img-box h1{
		margin-bottom:-50px;
	}
	.mainv-area .img-box{
		width:100%;
		padding-top:20px;
		margin-bottom:-60px;
		margin-top:0;
	}
	/*お友達紹介エリア*/
	.point-area{
		width:100%;
		margin-top:20px;
	}
	.point-inner{
		padding-top:30px;
		position: relative;
	}
	.point-area .sec-ttl{
		margin-bottom:-50px;
		position: relative;
	}
	.point-inner::before{
		position: absolute;
		top:0%;
		left:-5.6%;
		content:"";
		width:110%;
		height:103%;
		border:dashed 2px #222;
	}
	.point-inner::after{
		position: absolute;
		top:3%;
		left:-10%;
		content:"";
		width:120%;
		height:104%;
		border:dashed 2px #fff;
	}
	.point-inner .point-box:nth-child(3){
		margin-bottom:15px;
	}
	.point-box img{
		width:22%;
	}
	.point-area .btn-area a{
		width:90%;
		margin-bottom:15px;
		font-size: 2rem;
		line-height: 4em;
	}
	.cont strong{
		font-size: 1.6rem;
	}
	.cont p{
		font-size: 1.3rem;
	}
    /*プロフィールエリア*/
	.prof-box{
		width:100%;
	}
	.prof-box table{
		padding:30px 15px;
		margin-bottom:40px;
	}
	.prof-box tbody{
		font-size: 1.4rem;
	}
	th{
		width:22%;
	}
	td{
		width:76%;
	}
	.prof-box .table-ttl{
		margin-bottom:15px;
	}
	.bike-box {
		background: url("../images/bike-sp-min.png")no-repeat;
		background-size: contain;
		padding:30px 15px;
	}
	.bike-text p{
		font-size: 1.7rem;
		margin-bottom:20px;
	}
	.sec-sub-ttl p{
		font-size:  2.6rem
	}
	.sec-sub-ttl span{
		font-size: 1.7rem;
	}
	.bike-text{
		text-align: center;
	}
	.prof-area{
		padding-bottom:30px;
	}
	.prof-area .sec-ttl{
		margin-top:-40px;
		margin-bottom:40px;
	}
	.prof-box img{
		width:15%;
	}
	.prof-box .deco1{
		top:-2%;
	}
	.prof-box .deco2{
		top:-2.3%;
	}
	.prof-box .deco3{
		bottom:-3%;
	}
	.prof-box .deco4{
		bottom:-2%;
	}
	

    /*こんなこと始めます*/
	.pick-area .sec-ttl{
		margin-bottom:-20px;
	}
	.pick-inner{
		padding:30px 15px 0;
	}
	.yellow-bg{
		width:100%;
		font-size: 1.3rem;
		padding:10px 0;
		margin-bottom:10px;
		line-height: 1.5em;
	}
	.pick-item p{
		font-size: 1.1rem;
	}
	.bike-cont{
		font-size: 1.5rem;
		padding:35px 0;
		margin-bottom:0;
	}
	.bike-cont::after{
		width:95%;
		height:92%;
	}
	.pupple{
		font-size: 2rem;
	}
    /*今お友達になってもらうと！*/
	.flow-area .sec-ttl{
		margin:0 0 40px;
		text-align: left;
		margin-left:-16px;
	}
	.flow-box{
		width:90%;
		padding-bottom:0;
		margin:0 auto 60px;
	}
	.flow-box:nth-child(2)::after{
		background-size: 70%;
		right: -16%;
		top:-20%;
	}
	.flow-box:nth-child(3)::after{
		background-size: 70%;
		top:-20%;
		left:-7%;
	}
	.flow-box:nth-child(4)::after{
		background-size: 70%;
		right:-17%;
		top:-20%;
	}

	.flow-box::after{
		background-size: 70%;
	}
	.step-left{
		width:80%;
		bottom:-20%;
		left:-7%;
	}
	.step-right{
		width:80%;
		right:-7%;
		bottom:-20%;
	}
	.opt-text{
		font-size: 2.4rem;
	}
	.opt-text::before{
		left:10%;
	}
	.flow-area .btn-area a{
		width:90%;
		font-size: 2.2rem;
		line-height: 4em;
	}
	.flow-area .lineicon{
		width:50px;
		height: 50px;
		
		padding:1.8rem 2rem;
	}
	.flow-area .btn-area a::after{
		top:40%;
		right:10px;
	}
	.messe-box{
		padding:80px 30px 30px;
		font-size: 1.5rem;
	}
	.sine{
		width:40%;
		bottom:-20%;
	}
}

@media screen and (max-width:375px) {
	.bike-cont::after{
		top:2%;
		height:94%;
	}
	.bike-cont{
		font-size: 1.4rem;
	}
	.pupple{
		font-size: 2rem;
	}
	.opt-text::before{
		left:9%;
	}
	.flow-area .btn-area a{
		font-size: 2.2rem;
	}
	.flow-area .lineicon{
		padding:1.8rem 1rem;
	}
	.flow-area .btn-area a::after{
		right:0;
	}
	.pupple{
		font-size: 1.7rem;
	}
	.sine{
		bottom:-10%;
	}
	.point-area .btn-area a{
		font-size: 1.8rem;
	}
	.btn-area a::after{
		top:37%;
	}

}
@media screen and (max-width:360px){
	.opt-text::before{
		left:-3px;
	}
	.pupple{
		font-size: 1.5rem;
	}
	.pick-item p{
		font-size: .4rem;
		line-height: 3em;
		letter-spacing: normal;
	}
	.bike-box{
		background-size: cover;
	}
	.prof-box tbody{
		font-size: 1.2rem;
	}
	.prof-area .sec-ttl{
		margin-top:-30px;
	}
	.point-area .btn-area a{
		font-size: 1.4rem;
	}
	.flow-area .btn-area a{
		width:100%;
		font-size: 2rem;
		line-height: 4.2em;
	}
	.flow-area .lineicon{
/*		padding:0 2rem;*/
	}
	.bike-cont{
		font-size: 1.3rem;
	}
	.yellow-bg{
		font-size: 1.2rem;
	}
	.bike-cont{
		font-size: 1rem;
	}
}