@charset "UTF-8";
/**************************************************************************
*
* ご利用ガイド（3ページ共通）
*
**************************************************************************/

/*************************************************
	PCサイズ用 CSS
*************************************************/
@media screen and (min-width: 769px) {

	/* 共通
	------------------------------------*/
	.userguide-flow img {
		width: 100%;
	}
	.userguide-flow figure {
		line-height: 1;
	}
	.userguide-flow .boxttl {
		text-align-last: left;
		margin-bottom: 25px;
	}
	.userguide-flow .boxttl .icon-step {
		background: #2ab8b4;
		max-width: 64px;
		margin-right: 2%;
		width: 19%;
		line-height: 1;
		padding: 5px 8px;
		display: inline-block;
		vertical-align: top;
	}
	.userguide-flow .boxttl p {
		color: #333;
		font-size: 19px;
		font-weight: bold;
		line-height: 1.35;
		/*letter-spacing: -0.9px;*/
		display: inline-block;
		vertical-align: middle;
		width: 71%;
	}
	.userguide-flow ul {
		display:-webkit-box;
		display:-moz-box;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:flex;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	.userguide-flow ul li {
		background-color: #f0f1f2;
		display: inline-block;
		vertical-align: top;
		width: 39.5%;
		margin: 0 3% 40px 0;
		padding: 3%;
	}
	.userguide-flow ul li.icon-arrow {
		background: none;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 3.9%;
		margin-right: 2%;
		padding: 0;
	}
	.userguide-flow ul li:nth-of-type(3n) {
		margin-right: 0;
	}

/*ボタン
	------------------------------------*/
	.userguide-flow .btn-area .btn-1clm {
		width: 65%;
		margin: 0 auto;
	}
	.userguide-flow .btn-area {
		margin-top: 100px;
	}
	.userguide-flow .btn-area .txt {
		font-size: 15px;
		font-weight: bold;
	}
	.recruitment-box__btn .btn-regist .txt {
		padding: 0 !important;
	}
	.recruitment-box__btn:nth-of-type(n+2) {
		margin-top: 20px;
	}
	/*いますぐ登録！ ボタン*/
	.userguide-flow .btn-area .btn-regist {
		background: #e6007f;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 18px 0;
		width: 50%;
		float: none;
		border-radius: 2px;
		border: 2px solid #e6007f;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
		border-radius: 3px;
	}
	.userguide-flow .btn-area .btn-regist:hover {
		background: #c2006b;
	}
	.userguide-flow .btn-area .btn-regist img {
		width: 21px;
	}
	/*登録フローを確認する ボタン*/
	.userguide-flow .btn-flow {
		background: #fff;
		color: #106cb8;
		font-size: 85.71429%;
		text-align: center;
		line-height: 1.2;
		display: block;
		margin: 20px auto 0 auto;
		padding: 15px 0;
		width: 50%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
		border-radius: 3px;
		border: solid 2px #106cb8;
	}
	.userguide-flow .btn-flow:hover {
		background: #fff;
	}
	.userguide-flow .btn-flow img {
		width: 8px;
		vertical-align: middle;
    margin-right: 10px;
	}
	.userguide-flow .btn-flow .txt {
		font-size: 15px;
		font-weight: bold;
		padding: 0 !important;
	}

	/*MSP連携フロー*/
	.userguide-flow .btn-area .btn-msp {
		background: #8f8356;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 10px 0;
		width: 44.4%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
	}
	.userguide-flow .btn-area .btn-msp:hover {
		background: #7a6f44;
	}
	.userguide-flow .btn-area .btn-msp img {
		width: 8px;
		margin: 0 8px 0 0;
		vertical-align: middle;
	}
	/*退会*/
	.userguide-flow .btn-area .btn-withdraw {
		background: #e6007f;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 10px 0;
		width: 44.4%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
	}
	.userguide-flow .btn-area .btn-withdraw:hover {
		background: #c2006b;
	}
	.userguide-flow .btn-area .btn-withdraw img {
		width: 21px;
		margin: 0 10px 0 0;
		vertical-align: middle;
	}
	/*連携済み*/
	.userguide-flow .btn-area .btn-linked {
		background: #0062b4;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 18px 0;
		width: 50%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
		border-radius: 3px;
		box-sizing: border-box;
	}
	.userguide-flow .btn-area .btn-linked:hover {
		background: #005aa5;
	}
	.userguide-flow .btn-area .btn-linked img {
		width: 21px;
		margin: 0 10px 0 0;
		vertical-align: middle;
	}

	/* LINE連携 */
	.userguide-flow .btn-area .btn-line {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 487px;
		transition: .6s opacity ease-out;
	}
	.userguide-flow .btn-area .btn-line:hover {
		opacity: 0.7;
	}

	/* 動画アンカーボタン */
	.userguide-flow .movie-button-wrap{
		width: 65%;
		margin: 20px auto 0;
	}
	.userguide-flow .movie-button{
		background: #fff;
    color: #106cb8;
    font-size: 15px;
		font-weight: bold;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 18px 0;
    width: 50%;
    box-shadow: 0 2px 0 0 rgb(205 0 113 / 0%);
    transition: opacity 0.4s ease-out;
    border-radius: 3px;
    border: solid 2px #106cb8;
		position: relative;
	}
	.userguide-flow .movie-button:hover{
		opacity: 0.7;
	}
	.userguide-flow .movie-button:before{
		content:'';
		display: inline-block;
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: rotate(45deg) translateX(-50%);
		border-bottom: 2px solid #106cb8;
		border-right: 2px solid #106cb8;
		width: 8px;
		height: 8px;
	}


	/* 動画エリア */
	.userguide-flow .movie-area {
    width: 800px;
		max-width: 100%;
    margin: 0 auto 3em;
	}
	.userguide-flow .movie-area-txt {
    text-align: center;
		font-size: 19px;
		font-weight: bold;
	}
	.userguide-flow .movie-area-inner {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
		border: 2px solid #000;
	}

	/*注意テキスト*/
	.userguide-flow .application-text {
		font-size: 16px;
		margin-top: 20px;
		text-align: center;
	}

	.about-card-btmarea {
		margin-top: 20px;
	}

	.about-card-btmarea a {
		color: #106cb8;
	}


}
/*************************************************
	SPサイズ用 CSS
**************************************************/
@media screen and (max-width: 768px) {

	/* 共通
	------------------------------------*/
	.list-content p.text--center.mb40 {
		font-size: 3.73vw;
	}
	.hdg-special span.sub-page .text {
		text-align: center;
	}
	.userguide-flow img {
		width: 100%;
	}
	.userguide-flow figure {
		line-height: 1;
	}
	.userguide-flow .boxttl {
		text-align-last: left;
		margin-bottom: 5.33vw;
	}
	.userguide-flow .boxttl .icon-step {
		background: #2ab8b4;
		max-width: 11.47vw;
		margin-right: 2%;
		width: 19%;
		line-height: 1;
		padding: .67vw 1.07vw;
		display: inline-block;
		vertical-align: top;
	}
	.userguide-flow .boxttl p {
		color: #333;
		font-size: 4.27vw;
		font-weight: bold;
		line-height: 1.35;
		display: inline-block;
		vertical-align: middle;
		width: 79%;
	}
	.userguide-flow ul {
		margin-bottom: 6.67vw;
	}
	.userguide-flow ul li {
		background-color: #f0f1f2;
		margin: 0 0 5.33vw 0;
		padding: 4.27vw;
	}
	.userguide-flow ul li:last-of-type {
		margin-bottom: 0;
	}
	.userguide-flow ul li.icon-arrow {
		display: none;
	}
/*ボタン*/
	.userguide-flow .btn-area .btn-1clm {
		width: 100%;
	}
	.userguide-flow .btn-area {
		margin-top: 13.33vw;
	}
	.userguide-flow .btn-area .txt {
		font-size: 4.27vw;
		font-weight: bold;
		line-height: 1;
	}
	.recruitment-box__btn .btn-regist .txt {
		padding: 0 !important;
	}
	.recruitment-box__btn:nth-of-type(n+2) {
		margin-top: 4vw;
	}
	/*今すぐ会員登録（無料）*/
	.userguide-flow .btn-area .btn-regist {
		background: #e6007f;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 3vw 0;
		width: 100%;
		float: none;
		border-radius: 2px;
		border: 2px solid #e6007f;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		box-sizing: border-box;
		transition: .6s background ease-out;
	}
	.userguide-flow .btn-area .btn-regist img {
		width: 5.87vw;
		margin-right: 1.6vw;
		vertical-align: middle;
	}
	/*MSP連携フロー*/
	.userguide-flow .btn-area .btn-msp {
		background: #8f8356;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 3vw 0;
		width: 74.65%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
	}
	.userguide-flow .btn-area .btn-msp img {
		width: 2.1vw;
		margin: 0 2.1vw 0 0;
		vertical-align: inherit;
	}

	/*登録フローを確認する ボタン*/
	.userguide-flow .btn-flow {
		background: #fff;
		color: #106cb8;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 1em auto 4em auto;
		padding: 3vw 0;
		width: 100%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
		border-radius: 3px;
		border: solid 2px #106cb8;
		box-sizing: border-box;
	}
	.userguide-flow .btn-flow:hover {
		background: #fff;
	}
	.userguide-flow .btn-flow img {
		width: 8px;
		vertical-align: middle;
		margin: 0 2.1vw 0 0;
	}
	.userguide-flow .btn-flow .txt {
		font-size: 4.27vw;
    font-weight: bold;
    line-height: 1;
		font-weight: bold;
		padding: 0 !important;
	}

	/*退会*/
	.userguide-flow .btn-area .btn-withdraw {
		background: #e6007f;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 3vw 0;
		width: 74.65%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
	}
	.userguide-flow .btn-area .btn-withdraw img {
		width: 5.87vw;
		margin-right: 1.6vw;
		vertical-align: middle;
	}
	/*連携済み*/
	.userguide-flow .btn-area .btn-linked {
		background: #0062b4;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 3vw 0;
		width: 100%;
		float: none;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
		border-radius: 3px;
		box-sizing: border-box;
	}
	.userguide-flow .btn-area .btn-linked img {
		width: 5.87vw;
		margin-right: 1.6vw;
		vertical-align: middle;
	}

	/* LINE連携 */
	.userguide-flow .btn-area .btn-line {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 319px;
		max-width: 100%;
	}

	/* 動画アンカーボタン */
	.userguide-flow .movie-button{
		background: #fff;
    color: #106cb8;
    font-size: 4.27vw;
		font-weight: bold;
    text-align: center;
    display: block;
    margin: 20px auto 0 auto;
    padding: 3vw 0;
    width: 100%;
    box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		box-sizing: border-box;
    border-radius: 3px;
    border: solid 2px #106cb8;
		position: relative;
	}
	.userguide-flow .movie-button:before{
		content:'';
		display: inline-block;
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: rotate(45deg) translateX(-50%);
		border-bottom: 2px solid #106cb8;
		border-right: 2px solid #106cb8;
		width: 6px;
		height: 6px;
	}

	/* 動画エリア */
	.userguide-flow .movie-area {
    width: 100%;
    margin: 0 auto 3em;
	}

	.userguide-flow .movie-area-txt {
    text-align: center;
		font-size: 4.27vw;
		font-weight: bold;
	}

	.userguide-flow .movie-area-inner {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
		border: 2px solid #000;
	}

}


/**************************************************************************
*
* ご利用ガイド（MSP連携フロー）
*
**************************************************************************/

/*************************************************
	PCサイズ用 CSS
*************************************************/
@media screen and (min-width: 769px) {
	.msppoint_flow .icon-text--center {
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: .1em;
    font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.msppoint_flow .icon-text--center .icon-text--center__icon {
		width: 50px;
	}
	.msppoint_flow .text--center-step {
		color: #333;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
	}

	.msppoint_flow .about-card {
		background: #f9efd9;
		margin-top: 55px;
		padding: 50px;
	}
	.msppoint_flow .about-card .about-card-inr {
		text-align: center;
	}
	.msppoint_flow .about-card .about-card-inr .leftcnt ,
	.msppoint_flow .about-card .about-card-inr .rightcnt {
		display: inline-block;
		vertical-align: top;
		width: 48%
	}
	.msppoint_flow .about-card .about-card-inr .leftcnt {
		margin-right: 3%;
	}
	.msppoint_flow .about-card .about-card-inr .leftcnt figure:first-of-type {
		margin-bottom: 25px;
		padding-bottom: 25px;
		border-bottom: 1px solid #FFF;
	}
	.msppoint_flow .about-card .about-card-inr .leftcnt figure:first-of-type img {
		width: 100%;
		max-width: 225px;
	}
	.msppoint_flow .about-card h3 {
		color: #635c3d;
		font-size: 24px;
		font-weight: bold;
		line-height: 1;
		margin-bottom: 30px;
	}
	.msppoint_flow .about-card p {
		font-size: 18px;
		text-align: left;
	}
	/*カードエリアボタン*/
	.userguide-flow .btn-area .btn-info_blank {
		background: #0063b8;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 320px;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
	}
	.userguide-flow .btn-area .btn-info_blank .txt {
		font-size: 26px;
		font-weight: normal;
		background: url(/assets/img/common/ico_nav_link.svg) no-repeat right 25px center;
		background-size: 14px auto;
		display: block;
	}
	.userguide-flow .btn-area .btn-info_blank .txt span {
		font-size: 22px;
	}
	.msppoint_flow .about-card:hover .btn-area .btn-info_blank {
		background: #0059a5;
	}
	.userguide-flow.userguide-flow .btn-area {
		margin-top: 15px;
	}


	.about-card-btmarea {
		margin-top: 20px;
	}
	.about-card-btmarea a {
		color: #106cb8;
	}



}/*************************************************
	SPサイズ用 CSS
**************************************************/
@media screen and (max-width: 768px) {
	.msppoint_flow .icon-text--center {
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: .1em;
    font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.msppoint_flow .icon-text--center .icon-text--center__icon {
		width: 50px;
	}
	.msppoint_flow .text--center-step {
		color: #333;
    font-size: 4.27vw;
    font-weight: bold;
    line-height: 1.35;
		text-align: center;
	}

	.msppoint_flow .about-card {
		background: #f9efd9;
		margin-top: 6.67vw;
		padding: 7% 0;
	}
	.msppoint_flow .about-card .about-card-inr {
		text-align: center;
		width: 86%;
		margin: 0 auto;
	}
	.msppoint_flow .about-card .about-card-inr .leftcnt ,
	.msppoint_flow .about-card .about-card-inr .rightcnt {
	}
	.msppoint_flow .about-card .about-card-inr .leftcnt figure:first-of-type {
		margin-bottom: 3.07vw;
		padding-bottom: 3.07vw;
		border-bottom: 1px solid #FFF;
	}
	.msppoint_flow .about-card .about-card-inr .leftcnt figure:first-of-type img {
		width: 100%;
		max-width: 30.4vw;
	}
	.msppoint_flow .about-card h3 {
		color: #635c3d;
		font-size: 5.33vw;
		font-weight: bold;
		line-height: 1.5;
		text-align: left;
		margin: 5.33vw 0 4vw;
	}
	.msppoint_flow .about-card p {
		font-size: 4.27vw;
		text-align: left;
	}
	/*カードエリアボタン*/
	.userguide-flow .btn-area .btn-info_blank {
		background: #0063b8;
		color: #fff;
		font-size: 85.71429%;
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 87%;
		float: none;
		border-radius: 2px;
		box-shadow: 0 2px 0 0 rgba(205,0,113,.004);
		transition: .6s background ease-out;
	}
	.userguide-flow .btn-area .btn-info_blank .txt {
		font-size: 3.47vw;
		font-weight: normal;
		background: url(/assets/img/common/ico_nav_link.svg) no-repeat right 25px center;
		background-size: 2.5vw auto;
		display: block;
		padding: 4.2vw 0;
	}
	.userguide-flow .btn-area .btn-info_blank .txt span {
		font-size: 2.93vw;
	}
	.userguide-flow.userguide-flow .btn-area {
		margin-top: 5.33vw;
	}
	/*注意テキスト*/
	.userguide-flow .application-text {
		font-size: 2.67vw;
		margin-top: 2.67vw;
		text-align: center;
	}

	.about-card-btmarea {
		width: 86%;
		margin: 6.67vw auto 0 auto;
	}
	.about-card-btmarea a {
		color: #106cb8;
	}

}