@charset "utf-8";

.swiper-container {height: 100%;}

#system-box {padding: 120px 40px 40px; height: 100%;}
#system-box .inner {position: relative; height: 100%; max-width: 1400px; margin: 0 auto; border-radius: 40px; background: #f0f0f0; padding: 20px 70px; box-shadow: 0px 0px 25px 0px rgba(156,156,156,1); -webkit-box-shadow: 0px 0px 25px 0px rgba(156,156,156,1); -moz-box-shadow: 0px 0px 25px 0px rgba(156,156,156,1);}
#system-box .inner .titH2 {padding-left: 0; font-size: 2.5rem;}

/* Edge */
::-webkit-input-placeholder {color: #a8a8a8; font-family: "Hiragino Kaku Gothic ProN W6", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.4rem;}
/* Internet Explorer 10-11 */
:-ms-input-placeholder {color: #a8a8a8; font-family: "Hiragino Kaku Gothic ProN W6", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.4rem;}
::placeholder {color: #a8a8a8; font-family: "Hiragino Kaku Gothic ProN W6", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.4rem;}


.red {color: #d10000;}
label.error {font-size: 1rem; color: #d10000; display: block;}

textarea,
input[type="email"],
input[type="text"] {border: 1px solid #ccc; background: #fff; padding: 3px 5px; width: 100%; max-width: 395px; font-family: "Hiragino Kaku Gothic ProN W6", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.4rem;}
input[type=radio],
input[type=checkbox] {margin-right: 5px; font-size: 1.4rem;}

table {width: 100%; font-size: 1.4rem;}
table td {vertical-align: middle; padding: 3px 0;}
table tr td:nth-of-type(1) {vertical-align: top; width: 20%;}
table tr td:nth-of-type(1) span {color: #d10000; font-size: 1.2rem;}
table tr td:nth-of-type(2) {width: 80%;}
table tr td ul {display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 900px; width: 100%;}
table tr td .info {font-size: 1rem; max-width: 900px; width: 100%;}
table tr td .row {margin-bottom: 6px; display: block;}
table tr td .row:last-of-type {margin-bottom: 0;}
table tr td .rowBtn * {display: inline-block; vertical-align: middle;}
table tr td .rowBtn input {max-width: 200px;}
table tr td .rowBtn button {border-radius: 5px; background: #000; color: #fff; font-family: "Hiragino Kaku Gothic ProN W6", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; padding: 3px 5px; font-size: 1.4rem; cursor: pointer;}
table tr td .rowBtn button:hover {opacity: 0.8;}

input[type="submit"] {font-family: "Hiragino Kaku Gothic ProN W6", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.8rem; letter-spacing: 0.1em; display: block; max-width: 150px; width: 100%; margin: 0 auto; text-align: center; color: #fff; background: #000; padding: 10px 0; border-radius: 5px; transition: all 0.5s; cursor: pointer; -webkit-appearance: none; outline: none;}
input[type="submit"]:hover {opacity: 0.8;}
.wrapSubmit {max-width: 630px; width: 100%;}
.checkAgree {position: relative; display: block; width: 100%;}
.checkAgree #agree-error {position: absolute; bottom: -18px; width: 100%;}

/* Confirm */
#confirm .row {display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ccc;}
#confirm .row .col1 {width: 50%;}
#confirm .row .col2 {width: 50%;}
#confirm .btn {text-align: center; margin-top: 50px;}
#confirm .btn button {font-family: "Hiragino Kaku Gothic ProN W6", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.8rem; letter-spacing: 0.1em; display: inline-block; max-width: 150px; width: 100%; margin: 0 auto; text-align: center; color: #fff; background: #000; padding: 10px 0; border-radius: 5px; transition: all 0.5s; cursor: pointer; -webkit-appearance: none; outline: none;}
#confirm .btn button:hover {opacity: 0.8;}


/* Thanks */
#thank p {margin-bottom: 20px;}


/* MEDIA */
@media only screen and (max-width:1500px){
	::-webkit-input-placeholder {font-size: 1.2rem;}
	/* Internet Explorer 10-11 */
	:-ms-input-placeholder {font-size: 1.2rem;}
	::placeholder {font-size: 1.2rem;}
	
	.titH2 {font-size: 2rem !important; margin-bottom: 10px; padding-bottom: 10px;}
	
	.checkAgree {font-size: 1.2rem;}
	input[type="email"],
	input[type="text"] {font-size: 1.2rem;}
	input[type="submit"] {font-size: 1.2rem;}
	table tr td .rowBtn button {font-size: 1.2rem;}
	table tr td:nth-of-type(1) span {font-size: 1rem;}
	#system-box {padding: 80px 40px 40px;}
}

@media only screen and (max-width:1366px){
	::-webkit-input-placeholder {font-size: 1rem;}
	/* Internet Explorer 10-11 */
	:-ms-input-placeholder {font-size: 1rem;}
	::placeholder {font-size: 1rem;}
	table {font-size: 1rem;}
	table tr td:nth-of-type(1) span {font-size: 0.8rem;}
	.checkAgree {font-size: 1rem;}
	input[type="email"],
	input[type="text"] {font-size: 1rem;}
	input[type="submit"] {font-size: 1rem;}
	table tr td .rowBtn button {font-size: 1rem;}
	table tr td .info {font-size: 0.8rem;}
}

@media only screen and (max-width:1079px){
	.titH2 {text-align: center; font-size: 2.5rem !important;}
	
	#system-box {padding: 120px 20px 40px;}
	#system-box .inner {box-shadow: none; background: none; padding: 0;}
	
	table td {display: block; width: 100% !important;}
	table tr td:nth-of-type(1) span {font-size: 2.5vw;}		
	table tr td ul li {width: 100%;}
	table tr td .info {font-size: 1rem;}
	
	#confirm .row .col1 {width: 100%;}
	#confirm .row .col2 {width: 100%;}
}


@media only screen and (max-width:767px){
	::-webkit-input-placeholder {font-size: 3vw;}
	/* Internet Explorer 10-11 */
	:-ms-input-placeholder {font-size: 3vw;}
	::placeholder {font-size: 3vw;}

	input[type="submit"] {font-size: 4vw;}

	table {font-size: 3vw;}




	table tr td .rowBtn input {max-width: 150px;}
	table tr td .rowBtn button {font-size: 3vw;}
	table tr td .info {font-size: 3vw;}

}
