@charset "UTF-8";
/* CSS Information ===========
File name:registration.css
Description:SPM Cloud [front-user]
D&M/IJU Inc.
Date: 2018
Contents: *Registration Only
Root Em:100%
=============================== */
.registration__wrap{padding:0;}
.registration__inner{width:100%; max-width:77.5rem; margin:0 auto; border-top:solid 0.0625rem #ccc; border-bottom:solid 0.0625rem #ccc;}/*1240*/
/*Parts ==========*/
/*Head*/
.page__jump a{max-width:40rem; border-width:0.125rem;}
.registration__head{width:100%; margin:1.25rem 0;}
.registration__prev{width:100%; margin-bottom:0.625rem;}
.registration__prev:before{font-family:"FontAwesome"; content:"\f104";}
.registration__prev a{font-size:1.25rem; font-weight:bold; padding-left:0.625rem;}
.registration__msg{width:100%;}
.registration__msg__guide{font-size:1.125rem;}
.error__msg{margin-top:0.625rem;}
/*Box*/
.registration__box{width:100%; margin-bottom:2.5rem;}
.registration__item{font-size:1.625rem; margin-bottom:1.25rem;}
.registration__field{width:100%;}
.registration__field th{width:15.625rem; background:#f5f5f5; text-align:center; font-weight:normal;}
.registration__field th,.registration__field td{border:solid 1px #ccc; padding:0.9375rem; font-size:1.125rem;}
.registration__field .field--btnlinks{display:inline-block; margin-left:1.25rem;}
.registration__field .field--btnlinks a{display:inline-block; color:#4e83bb; border:solid 0.0625rem #4e83bb; padding:0.3125rem 0.625rem; border-radius:0.25rem;}
.registration__field .field--btnlinks a:after{font-family:"FontAwesome"; content:"\f105"; margin-left:0.3125rem;}
/*Parts*/
.field--linebox--wrap{display:inline-block;}
.field--linebox--wrap .field--linebox:last-of-type{margin-right:0;}
.field--linebox{display:inline-block; margin:0.625rem 1.625rem 0.625rem 0;}
.field--linebox input[type="radio"]{margin-top:-0.0625rem;}
.field--one-third--clm{width:33%;}
.field--one-third--clm span{margin-left:2%;}
.field--half{width:100%;}
.field--half--clm{width:50%;}
.field--half--sex{width:100%;}
.field--half--sex .field--half--clm{width:100%;}
.field--half--sex .field--half--clm:first-child{margin-bottom:0.625rem;}
.field--half--sex .form__parts__box{width:10rem; display:inline-block;}
.field--half--sex em{padding-right:0.625rem;}
.field--half--name{width:60%;}
.field--half--name .field--half--clm{width:96%;}
.field--half--name .field--half--clm:first-child{margin-right:2%;}
.field--half--name .field--half--clm:last-child{margin-left:2%;}
.form__parts__box{position:relative; border:solid 1px #ccc; width:100%; height:auto; min-height:3.125rem; padding:0.625rem; display:block;}
.form__parts__box .input--text{position:absolute; top:0; left:0; width:100%; height:100%; font-size:1.125rem; padding:0 0.625rem;}
.form__parts__box select{padding:0 0.625rem; height:3rem; line-height:3rem; font-size:1.125rem; cursor:pointer; width:100%; display:block; position:absolute; top:0; left:0;}
.select--icon:after{font-family:"FontAwesome"; content:"\f0d7"; position:absolute; right:0.625rem; top:26%;}
.form__parts__help{margin-top:0.625rem; font-size:1rem;}
.field--address .wid--40{width:40%;}
.form__parts__textarea{width:100%; padding:0.9375rem; border:solid 0.0625rem #ccc; display:block;}
.form__parts__textarea textarea{padding:0.9375rem; width:100%; min-height:6.25rem; max-height:12.5rem; resize:vertical; font-size:1.125rem;}
.registration__btn{width:100%; text-align:center; margin-bottom:2.5rem;}
.registration__btn button,.registration__btn a{font-size:1.5rem; font-weight:bold; padding:0.625rem; width:15.625rem; border-radius:0.625rem; margin:0 0.625rem 0.625rem;}
.registration__btn a{display:inline-block;}
.js--radio--wrap{display:none;}
.field--age .field--age--clm{width:33.33333333%;}
.field--age .field--age--clm .form__parts__box{width:calc(100% - 20%); margin-right:0.625rem;}
/* Thanks */
.registration__thanks{width:100%; margin:2.5rem 0;}
.registration__thanks__call{text-align:center; font-size:1.5rem; margin-bottom:1.875rem;}
.registration__thanks__call span{display:block;}
.registration__thanks__call strong{text-decoration:underline; background:#ff9;}
.registration__step{width:100%; max-width:62.5rem; margin:0 auto 2.5rem;}
.registration__step li{text-align:center;}
.registration__step__item{width:16.8%; border:solid 0.0625rem #ccc; background:#fff;}/*168*/
.registration__step__item dl{width:100%;}
.registration__step__item dl dt{padding:0.625rem; border-bottom:solid 0.0625rem #ccc; width:100%;}
.registration__step__item dl dd{padding:0.625rem; width:100%;}
.registration__step__item dl dd span{display:inline-block;}
.registration__step__arrow{width:2.5rem; position:relative;}/*40*/
.registration__step__arrow i:before{font-family:"FontAwesome"; content:"\f178"; font-size:1.375rem;
position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);}
.registration__step__current{background:#ea5e6a; color:#fff; font-weight:bold; border:0;}
.registration__step__current dl dt{border-color:#fff;}
.registration__thanks__help{text-align:center; margin-bottom:2.5rem; font-size:1.125rem;}
/*=======
RWD Responsive
=====================*/
/*(MIN)---------------------------*/
@media (min-width:64.0625em){/*1025*/
	}
/*(MAX)---------------------------*/
@media (max-width:80em){/*1280*/
	.field--linebox--wrap{display:block; border-top:dotted 0.0625rem #ccc; padding-top:0.625rem;}
	}
@media (max-width:64em){/*1024*/
	.registration__field th{width:12.5rem;}
	.field--half--name{width:100%;}
	.field--age .field--age--clm .form__parts__box{width:calc(100% - 25%);}
	}
@media (max-width:48em){/*768*/
	.registration__item{font-size:1.375rem;}
	.registration__btn button,.registration__btn a{font-size:1.25rem;}
	.registration__field th, .registration__field td{font-size:1rem;}
	.form__parts__box select{font-size:1rem;}
	.registration__msg__guide{font-size:1rem;}
	.form__parts__box .input--text{font-size:1rem;}
	.registration__thanks__call{font-size:1.25rem;}
	.registration__thanks__call span{display:inline;}
	.field--age .field--age--clm .form__parts__box{margin-right:0.3125rem;}
	.registration__step__item dl dd span{display:block;}
	}
@media (max-width:40em){/*640*/
	.registration__head.flex{display:block!important;}
	.registration__msg{padding-left:0;}
	.registration__field th, .registration__field td{display:block!important; width:100%; margin-top:-0.0625rem; text-align:left;}
	.registration__btn{margin-bottom:1.25rem;}
	.registration__step{font-size:0.875rem;}
	.registration__thanks__help{font-size:1rem;}
	}
@media (max-width:34.375em){/*550*/
	.registration__step{display:block; margin-bottom:1.25rem;}
	.registration__step__item{width:100%;}
	.registration__step__arrow{width:100%; height:2.5rem;}
	.registration__step__item dl dd,.registration__step__item dl dt{padding:0.3125rem; width:50%;}
	.registration__step__item dl dt{border-bottom:0; border-right:solid 0.0625rem #ccc;}
	.registration__step__current dl dt{border-color:#fff;}
	.registration__step__item dl dd span{display:inline-block;}
	.registration__step__arrow i:before{content:"\f175";}
	.registration__thanks__call{font-size:1.125rem; margin-bottom:0.625rem; text-align:left;}
	.registration__thanks__help{text-align:left; margin-bottom:1.25rem;}
	.registration__thanks__help{font-size:0.875rem;}
	}
@media (max-width:28.125em){/*450*/
	.registration__item{font-size:1.25rem;}
	.registration__prev a{font-size:1.125rem;}
	.registration__btn button,.registration__btn a{font-size:1.125rem;}
	.registration__field th, .registration__field td{font-size:0.875rem;}
	.form__parts__box select{font-size:0.875rem;}
	.form__parts__box .input--text{font-size:0.875rem;}
	.field--address .wid--40{width:100%;}
	.registration__thanks .registration__btn a{width:98%;}
	}
@media (max-width:25em){/*400*/
	.registration__btn button,.registration__btn a{width:100%; margin:0 0 0.625rem;}
	.registration__thanks__call{font-size:1rem;}
	}
@media (max-width:21.875em){/*350*/
	.field--age .field--age--clm{width:100%; margin-bottom:0.3125rem;}
	.field--age .field--age--clm:last-child{margin-bottom:0;}
	.field--age .field--age--clm .form__parts__box{width:calc(100% - 10%);}
	}

/*=========
ウェブアクセシビリティ対応
=====================*/
/* 赤字・太字・下線・拡大など単一の表現のみで情報を伝えてはいけない */
.required--red .required {
	font-size: 0.6em;
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5em;
	background-color: #d20b1d;
	color: #fff;
	padding: 5px 8px;
	border-radius: 6px;
	line-height: 1;
	letter-spacing: 0.1em;
}