html {
	height: 100%;
}
body {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
select {
  background-image: url(../img/select.png);
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
}
li {
	list-style: none;
}
.text-areas {
	white-space:pre-wrap;	
}
.select_tag {
	border : solid 1px #EEEEEE;
	border-radius : 5px;
	box-shadow:1px 1px 2px;
}
.modal-back .loading{
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.modal-back .loading img{
	 width: 450px;
     object-fit: contain;
     cursor: pointer;
}

.progressbar{
  counter-reset: step;
}

.progressbar li:before{
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 1px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}
.progressbar li:after{
  content: '';
  position: absolute;
  width:100%;
  height: 3px;
  background: #979797;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li.active:before{
 border-color: #3aac5d;
 background: #3aac5d;
 color: white
}
.progressbar li.active:after{
 background: #3aac5d;
}
.progressbar li.active - li:after{
 background: #3aac5d;
}
.progressbar li.active - li:before{
border-color: #3aac5d;
background: #3aac5d;
color: white
}
.progressbar li:first-child:after{
 content: none;
}

@keyframes fade{
	  0%{
	    opacity: 0;
	  }
	  100%{
	    opacity: 1;
	  }
	}
@keyframes fadeAndSlide{
  0%{
    opacity: 0;
    top : 0%;
  }
  100%{
    opacity: 1;
    top: 50%;
  }
}
@media screen and (min-width:1280px) {
	/*pc用*/
	.progressbar li{
		float: left;
		width: 25%;
		position: relative;
		text-align: center;
	}
	.container{
    	width: 130%;
    	position: inherit;
    	z-index: 1;
	}
	.main-contents {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		background-color : #ffffff;
		position : relative;
		top : 45px;
		margin-top : 12px;
		width : 75%;
	}
	.login-back {
		width : 25%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color : #ffffff;
		border-radius : 5px;
		box-shadow:1px 1px 2px;
		padding : auto;
		animation-name: fade;
		animation-duration: 1s;
	}
	.login-btn{
		width : 25%;
	}
	.back {
		width : 30%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color : #ffffff;
		border-radius : 5px;
		box-shadow:1px 1px 2px;
		padding : auto;
		animation-name: fadeAndSlide;
		animation-duration: 1s;
	}
}
  
@media only screen and (min-width:600px) and (max-width:1280px) {
	/*タブ用*/
	.progressbar li{
		float: left;
		width: 25%;
		position: relative;
		text-align: center;
	}
	.container{
    	width: 100%;
    	position: inherit;
    	z-index: 1;
	}
	.login-back {
		width : 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color : #ffffff;
		border-radius : 5px;
		box-shadow:1px 1px 2px;
		padding : auto;
		animation-name: fade;
		animation-duration: 1s;
	}
	.login-btn{
		width : 25%;
	}
	.back {
		width : 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color : #ffffff;
		border-radius : 5px;
		box-shadow:1px 1px 2px;
		padding : auto;
		animation-name: fadeAndSlide;
		animation-duration: 1s;
	}
	.search-submit {
		margin-top : 12px;
	}
	
	.main-contents {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		background-color : #ffffff;
		position : relative;
		top : 45px;
		margin-top : 12px;
		width : 100%;
	}
}
 
@media only screen and (min-width:320px) and (max-width:600px) {
	/*スマホ用*/
	.progressbar li{
		float: left;
		width: 25%;
		position: relative;
		text-align: center;
	}
	.container{
    	width: 100%;
    	right : 4%;
    	position: inherit;
    	z-index: 1;
	}
	.login-back {
		width : 95%;
		position: absolute;
		top: 50%;
		left: 54%;
		transform: translate(-50%, -50%);
		background-color : #ffffff;
		border-radius : 5px;
		box-shadow:1px 1px 2px;
		padding : auto;
		animation-name: fade;
		animation-duration: 1s;
	}
	
	.login-btn{
		width : 50%;
	}
	
	.back {
		width : 95%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color : #ffffff;
		border-radius : 5px;
		box-shadow:1px 1px 2px;
		padding : auto;
		animation-name: fadeAndSlide;
		animation-duration: 1s;
	}
	.login-back input,.back input {
		width : 75%;	
	}
	
	.search-submit {
		margin-top : 12px;
	}
	
	.main-contents {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		background-color : #ffffff;
		position : relative;
		top : 45px;
		margin-top : 12px;
		width : 100%;
	}
}
@media ( min-width : 1000px) {
	html {
		scroll-behavior: smooth;
	}
	body {
		font-family : "M+ 1p";
	}
	
	.main-contents {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		background-color : #ffffff;
		position : relative;
		top : 45px;
	}
	.login-back a:hover,.back a:hover{
		text-decoration : none;
	}
	
	#page-top {
	    position: fixed;
	    right: 5px;
	    bottom: 40px;
	    height: 50px;
	    text-decoration: none;
	    font-weight: bold;
	    transform: rotate(90deg);
	    font-size: 90%;
	    line-height: 1.5rem;
	    color: #272727;
	    padding: 0 0 0 35px;
	    border-top: solid 2px #272727;
	}
	#page-top::before {
	    content: "";
	    display: block;
	    position: absolute;
	    top: -1px;
	    left: 0px;
	    width: 30px;
	    border-top: solid 2px #272727;
	    transform: rotate(35deg);
	    transform-origin: left top;
	}
	.select-btn{
		border : solid 1px #EEEEEE;
		box-shadow:1px 1px 2px;
		color : #000000;
	}
	.select-btn:hover{
		background-color : #EEEEEE;
	}
	.select-btn:active{
		background-color : #EEEEEE;
		border-bottom : solid 1px #AAAAAA;
		box-shadow:2px 2px 3px;
	}
	.submit-btn{
		border : solid 1px #EEEEEE;
		box-shadow:1px 1px 2px;
		color : #000000;
	}
	.submit-btn:hover{
		background-color : #FFCCFF;
	}
	.submit-btn:active{
		background-color : #FFBBFF;
		border-bottom : solid 1px #AAAAAA;
		box-shadow:2px 2px 3px;
	}
	.terms-btn{
		border : solid 1px #EEEEEE;
		box-shadow:1px 1px 2px;
		color : #000000;
	}
	.terms-btn:hover{
		background-color : #DDFFFF;
	}
	.terms-btn:active{
		background-color : #CCFFFF;
		border-bottom : solid 1px #AAAAAA;
		box-shadow:2px 2px 3px;
	}
	.modal-back .close-icon{
		font-size : 40px;
		color : rgba(255,255,255,1);
	}
	.modal-back .close-icon:hover{
		font-size : 40px;
		color : rgba(255,255,255,0.8);
	}
	.modal-back {
		background-color : rgba(50,55,55,0.9);
		top : 0;
		left : 0;
		position: fixed;
		z-index : 10;
		color : #FFFFFF;
		animation-name: fade;
		animation-duration: 0.5s;
	}
	.modal-back p {
		color : #CCFFFF;
	}
	.modal-back .modal {
		background-color : #ffffff;
		top : 0;
		left : 0;
		position: fixed;
		z-index : 11;
	}
	.info-contents {
		border : 1px solid #EEEEEE;
	}
	.terms-box{
		border : 1px solid #EEEEEE;
		background-color : #FFFFFF;
		color : #000000;
		overflow : scroll;
		height: 90%;
		white-space:pre-wrap;
	}
	.terms-comment {
		font-size : 15px;
		color : #00FF00;
	}
	
	.modal-back .paymentBox {
		background-color : #ffffff;
		border-radius : 5px;
		box-shadow:1px 1px 2px;
		padding : auto;
		animation-name: fade;
		animation-duration: 1s;
	}
	 	
}
@media ( max-width : 1000px) {
 	html {
		scroll-behavior: smooth;
	}
	body {
		font-family : "M+ 1p";
	}
	
	.main-contents {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		background-color : #ffffff;
		position : relative;
		top : 45px;
	}
	.login-back input,.back input {
		width : 75%;	
	}
	.login-back a:hover,.back a:hover{
		text-decoration : none;
	}
	#page-top {
	    position: fixed;
	    right: 5px;
	    bottom: 40px;
	    height: 50px;
	    text-decoration: none;
	    font-weight: bold;
	    transform: rotate(90deg);
	    font-size: 90%;
	    line-height: 1.5rem;
	    color: #272727;
	    padding: 0 0 0 35px;
	    border-top: solid 2px #272727;
	}
	#page-top::before {
	    content: "";
	    display: block;
	    position: absolute;
	    top: -1px;
	    left: 0px;
	    width: 30px;
	    border-top: solid 2px #272727;
	    transform: rotate(35deg);
	    transform-origin: left top;
	}
	.select-btn{
		border : solid 1px #EEEEEE;
		box-shadow:1px 1px 2px;
		color : #000000;
	}
	.select-btn:hover{
		background-color : #EEEEEE;
	}
	.select-btn:active{
		background-color : #EEEEEE;
		border-bottom : solid 1px #AAAAAA;
		box-shadow:2px 2px 3px;
	}
	.submit-btn{
		border : solid 1px #EEEEEE;
		box-shadow:1px 1px 2px;
		color : #000000;
	}
	.submit-btn:hover{
		background-color : #FFCCFF;
	}
	.submit-btn:active{
		background-color : #FFBBFF;
		border-bottom : solid 1px #AAAAAA;
		box-shadow:2px 2px 3px;
	}
	.terms-btn{
		border : solid 1px #EEEEEE;
		box-shadow:1px 1px 2px;
		color : #000000;
	}
	.terms-btn:hover{
		background-color : #DDFFFF;
	}
	.terms-btn:active{
		background-color : #CCFFFF;
		border-bottom : solid 1px #AAAAAA;
		box-shadow:2px 2px 3px;
	}
	.modal-back .close-icon{
		font-size : 40px;
		color : rgba(255,255,255,1);
	}
	.modal-back .close-icon:hover{
		font-size : 40px;
		color : rgba(255,255,255,0.8);
	}
	.modal-back {
		background-color : rgba(50,55,55,0.9);
		top : 0;
		left : 0;
		position: fixed;
		z-index : 10;
		color : #FFFFFF;
		animation-name: fade;
		animation-duration: 0.5s;
		overflow : scroll;
	}
	.modal-back p {
		color : #CCFFFF;
	}
	.modal-back .modal {
		background-color : #ffffff;
		top : 0;
		left : 0;
		position: fixed;
		z-index : 11;
	}
	.info-contents {
		border : 1px solid #EEEEEE;
	}
	.terms-box{
		border : 1px solid #EEEEEE;
		background-color : #FFFFFF;
		color : #000000;
		overflow : scroll;
		height: 90%;
		white-space:pre-wrap;
	}
	.terms-comment {
		font-size : 15px;
		color : #00FF00;
	}
}