@charset "UTF-8";

h1, h2, h3, p, a { font-family: "Futura", "Avenir Next", "Lato", "NotoSansJP-Regular", "HiraginoSans-W3", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: 400; }
.pc { display: block; }
.sp { display: none; }

body.app_join { min-width: 1070px; }
#lp-app-join h2 { position: relative; display: inline-block; font-size: 34px; margin: 100px auto 45px; line-height: 1; font-weight: normal; }
#lp-app-join h2:before { content: ''; position: absolute; top: 50%; left: -100px; transform: translateY(-50%); display: block; width: 70px; height: 10px; background: #FB4D26; }
#lp-app-join h2:after { content: ''; position: absolute; top: 50%; right: -100px; transform: translateY(-50%); display: block; width: 70px; height: 10px; background: #FB4D26; }

@media screen and (max-width: 767px) {
	.pc { display: none; }
	.sp { display: block; }

	body.app_join { min-width: 100%; }
	#lp-app-join h2 { font-size: 21px; margin: 70px auto 45px; line-height: 1; font-weight: normal; }
	#lp-app-join h2:before { content: ''; left: -90px; height: 2px; }
	#lp-app-join h2:after { content: ''; right: -90px; height: 2px; }
}


/*--------------------------------
	cover
---------------------------------*/
#lp-app-join .cover { width: 100%; max-width: 1070px; margin: auto; position: relative; }
#lp-app-join .cover h1 { display: flex; align-items: center; justify-content: center; font-size: 44px; width: 100%; height: 70px; color: #fff; margin: 60px auto 0; position: relative; z-index: 1; }
#lp-app-join .cover h1:after { content: ''; position: absolute; display: block; width: 0; height: 70px;  background: #FB4D26; z-index: -1; transition: 0.6s ease; z-index: -10; }
#lp-app-join .cover h1.js__on:after { content: ''; width: 100%; }
#lp-app-join .cover p { margin: 50px 0 0 290px; font-size: 18px; line-height: 1.78; }
#lp-app-join .cover img { position: absolute; top: -60px; left: 80px; width: 140px; z-index: 2; }

@media screen and (max-width: 767px) {
	#lp-app-join .cover { width: 100%; max-width: 310px; position: relative; }
	#lp-app-join .cover h1 { font-size: 21px; width: 100%; max-width: 310px; height: 34px; margin: 40px auto 0; position: relative; z-index: 1; }
	#lp-app-join .cover h1:after { content: ''; height: 34px; }
	#lp-app-join .cover h1.js__on:after { content: ''; width: 100%; max-width: 310px; }
	#lp-app-join .cover p { margin: 45px 0 0 90px; font-size: 13px; line-height: 2; letter-spacing: -.02em; }
	#lp-app-join .cover img { position: absolute; top: 60px; left: 0px; width: 70px; }
}


/*--------------------------------
	flow
---------------------------------*/
#lp-app-join .flow { text-align: center; margin: 0 auto 0; width: 100%; }
#lp-app-join .flow p { font-size: 16px; line-height: 1.68; }
#lp-app-join .flow .flow_inner { width: 100%; background-image: url(/img/app_join/bg-intro-bottom-1@xl.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; padding-bottom: 0; }
#lp-app-join .flow .flow_inner:nth-of-type(2) { width: 100%; background-image: url(/img/app_join/bg-intro-bottom-2@xl.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; padding-bottom: 0; }
#lp-app-join .flow .flow_inner:nth-of-type(3) { width: 100%; background-image: url(/img/app_join/bg-intro-bottom-3@xl.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; padding-bottom: 0; }
#lp-app-join .flow .flow_inner:nth-of-type(4) { width: 100%; background-image: url(/img/app_join/bg-intro-bottom-4@xl.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; padding-bottom: 0; }
#lp-app-join .flow .flow_inner .flow_inner_box { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 90px 60px 45px 60px; margin: auto; max-width: 1070px; }
#lp-app-join .flow .flow_inner:nth-of-type(1) .flow_inner_box { padding: 45px 60px 195px 60px; justify-content: center; }
#lp-app-join .flow .flow_inner .flow_inner_box h3 { display: flex; align-items: center; font-size: 22px; width: 100%; margin: 0 0 40px 0; text-align: left; font-weight: normal; position: relative; padding-left: 110px; line-height: 2; }
#lp-app-join .flow .flow_inner .flow_inner_box h3 span { font-size: 42px; color: #FB4D26; margin: 0 45px 0 0; line-height: 1; font-weight: normal; border-left: 10px solid #FB4D26; padding-left: 15px; position: absolute; top: 0; left: 0; }
#lp-app-join .flow .flow_inner .flow_inner_box .flow_inner_txt { margin-top: 45px; }
#lp-app-join .flow .flow_inner .flow_inner_box .flow_inner_txt p { margin-left: 110px; line-height: 1.86; }
#lp-app-join .flow .flow_inner .flow_inner_box .img-icon-app { width: 130px; margin-right: 45px; }
#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap { align-self: flex-end; }
#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap .img-btn { display: inline-block; width: 203px; }
#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap .img-btn img { width: 100%; }
#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap .img-btn + .img-btn { margin-left: 25px; }
#lp-app-join .flow .flow_inner .flow_inner_box .img-flow { width: 200px; margin-right: 30px; }
#lp-app-join .flow .flow_inner .flow_inner_box p { font-size: 16px; line-height: 1.63; align-self: flex-start; text-align: left; margin-top: 35px; max-width: 530px; line-height: 1.86; }

#lp-app-join .flow .flow_inner .flow_inner_box .flow_inner_txt p.note { font-size: .8em; margin-top: -2em; }
#lp-app-join .flow .flow_inner .flow_inner_box .flow_inner_txt p + p.note { margin-top: .5em; }

@media screen and (max-width: 767px) {
	#lp-app-join .flow { text-align: center; margin: 20px auto 0; width: 100%; }
	#lp-app-join .flow p { font-size: 16px; line-height: 1.68; }
	#lp-app-join .flow .flow_inner { background-image: url(/img/app_join/bg-intro-bottom-1@sm.png); }
	#lp-app-join .flow .flow_inner:nth-of-type(2) { background-image: url(/img/app_join/bg-intro-bottom-2@sm.png); }
	#lp-app-join .flow .flow_inner:nth-of-type(3) { background-image: url(/img/app_join/bg-intro-bottom-3@sm.png); }
	#lp-app-join .flow .flow_inner:nth-of-type(4) { background-image: url(/img/app_join/bg-intro-bottom-4@sm.png); }
	#lp-app-join .flow .flow_inner .flow_inner_box { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 55px 20px 40px; margin: auto; box-sizing: border-box; }
	#lp-app-join .flow .flow_inner:nth-of-type(1) .flow_inner_box { padding: 20px 20px 115px; justify-content: center; flex-direction: column; }
	#lp-app-join .flow .flow_inner .flow_inner_box h3 { font-size: 17px; margin: 0 0 30px 0; position: relative; padding-left: 50px; line-height: 1.59; width: auto; letter-spacing: -.04em; }
	#lp-app-join .flow .flow_inner .flow_inner_box h3 span { font-size: 22px; margin: 0 10px 0 0; border-left: 3px solid #FB4D26; padding-left: 10px; position: absolute; top: 3px; left: 0; }
	#lp-app-join .flow .flow_inner .flow_inner_box .flow_inner_txt { margin-top: 0; }
	#lp-app-join .flow .flow_inner .flow_inner_box .flow_inner_txt p { margin-left: 0; line-height: 1.86; }
	#lp-app-join .flow .flow_inner .flow_inner_box .img-icon-app { width: 75px; margin: 0 0 30px 0; }
	#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap { align-self: center; }
	#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap .img-btn { width: 220px; }
	#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap .img-btn img { width: 100%; }
	#lp-app-join .flow .flow_inner .flow_inner_box .img-btn_wrap .img-btn + .img-btn { margin: 5px 0 0; }
	#lp-app-join .flow .flow_inner .flow_inner_box .img-flow { width: 175px; margin-right: 0; }
	#lp-app-join .flow .flow_inner .flow_inner_box p { font-size: 13px; line-height: 1.77; align-self: flex-start; text-align: justify; margin: 25px 0 30px; max-width: 100%; }

	#lp-app-join .flow .flow_inner .flow_inner_box .flow_inner_txt p + p.note { margin-top: -2.6em; }
}

/*--------------------------------
	howToUse
---------------------------------*/
#lp-app-join .howToUse { margin: 0 auto 110px; width: 1070px; text-align: center; }
#lp-app-join .howToUse p { font-size: 18px; line-height: 1.68; text-align: center; }
#lp-app-join .howToUse a { display: block; width: 100%; margin: 50px auto 0; }
#lp-app-join .howToUse a img { width: 100%; }

@media screen and (max-width: 767px) {
	#lp-app-join .howToUse { margin: 0 auto 100px; width: 100%; padding: 0 15px; box-sizing: border-box; }
	#lp-app-join .howToUse p { font-size: 13px; line-height: 2; text-align: center; margin-top: 0; letter-spacing: -.04em; }
	#lp-app-join .howToUse a { display: block; width: 100%; margin: 30px auto 0; }

	#lp-app-join .howToUse h2:before { content: ''; left: -30px; width: 20px; }
	#lp-app-join .howToUse h2:after { content: ''; right: -30px; width: 20px; }
}