@charset "utf-8";
/* 会員登録フォームのcss */

/*=========================================
		登録状況の確認
=========================================*/

.step ol li:nth-last-child(2):after {
    width: 88%;
}

#register-check02 {
    padding: 50px 0;
    background: #D9F0FF;
}
#register-check02 > .table li:first-of-type { padding-right: 20px; }
#register-check02 > .table li:last-of-type { padding-left: 20px; }		
#register-check02 > .table, 
#register-check02 > .table li, 
#register-check02 .colorbox {
    height: 100%;
}
#register-check02 .colorbox {
    overflow: hidden;
    position: relative;
    padding-bottom: 150px;
    background: #fff;
}

#register-check02 > .table li .colorbox h3 {
    border: none;
    padding: 1rem;
    text-align: center;
    color: #345BA0;
    margin: 1em auto 0.5em;
    font-size: 2rem;
    line-height: 3rem;
    font-weight: bold;
}
#register-check02 .colorbox p { margin: 1rem 2.8rem; }
#register-check02 .colorbox p span { display: inline; }
#register-check02 .btn_style02 {
    position: absolute;
    bottom: 34px;
    left: 0;
    right: 0;
    width: 90%;
    max-width: 402px;
    margin: auto;
}
#register-check02 .btn_style02 a, 
#register-check02 .btn_style02 a {
    line-height: 1.6;
    max-width: 100%;
    margin: 0;
    width: 100%;
}



/*=========================================
		初めて寄付をする方
=========================================*/
#new-input #document .caption { margin-bottom: 1.5rem; }
#new-thanks .btn_wrap .btn:first-of-type { margin-bottom: 1.5rem; }
#new-index #mail { margin-bottom: 6rem; }
#new-index #mail input { width: 100%; }
.register_wrap #new-index .caption{ margin-bottom: 5rem; }

/*=========================================
		以前に寄付したことがある方
=========================================*/
.form .exist-input-exposition {
    padding: 3rem;
    line-height: 2.6rem;
    background: #EEFBFE;
    margin-bottom: 2em;
}
#exist-thanks .btn_wrap .btn:first-of-type { margin-bottom: 1.5rem; }
#exist-thanks .thanks-comment { margin-bottom: 1rem !important; }

@media screen and (max-width: 999px) {		
	/*=========================================
			登録状況の確認
	=========================================*/
	.colorbox p.btn { width: calc(100% - 40px); }
	#register-check > .table {
    display: block;
}
	#register-check > .table li {
    padding-right: 0;
    display: block;
    width: 100%;
    margin: 0 0 2em;
}
	#register-check > .table li:first-of-type { padding-right: 0; }
	#register-check > .table li:last-of-type { padding-left: 0; }
	
	/*=========================================
			初めて寄付をする方
	=========================================*/
	#login { margin-bottom: 4rem; }
	#new-thanks .thanks-comment { text-align: center !important; }
	
	/*=========================================
			以前に寄付したことがある方
	=========================================*/
	#exist-thanks .thanks-comment { text-align: center !important; }
}

@media screen and (min-width: 481px) {
	/*=========================================
			登録状況の確認
	=========================================*/

	
	/*=========================================
			初めて寄付をする方
	=========================================*/
	#new-index #mail dl {
		/*width: 70%;
		margin: 0 9%;*/
	}
	/*#new-index #mail dt { width: 8em; }	*/
}

@media screen and (max-width: 480px) {
	.step ol li:nth-last-child(2):after {
    width: 2px;
}
	.register_wrap .caption { text-align: left !important; }
	.step { margin-bottom: 3rem; }
	.register_wrap .btn_wrap .circle-arrow_r:before,
	.register_wrap .btn_wrap .circle-arrow_r:after { display: none; }
	
	/*=========================================
			登録状況の確認
	=========================================*/
	#register-check > .table li:first-of-type { margin-bottom: 1rem; }
	#register-check .caption { margin-bottom: 2rem; }
	
	/*=========================================
			初めて寄付をする方
	=========================================*/
	#new-index #mail { margin-bottom: 4rem; }	
	#new-index .caption { margin-bottom: 2rem; }
	#new-thanks .thanks-comment { margin: 3rem auto 1rem !important; }
	
	/*=========================================
			以前に寄付したことがある方
	=========================================*/
	#exist-input #login { margin-bottom: 6rem; }
	#exist-thanks .thanks-comment { text-align: center !important; }
}