@charset "utf-8";
/* CSS Document */

body{
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	background-color: #F7FAFD;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
input[type="text"],input[type="email"],input[type="number"],input[type="tel"]
{
	border-radius: 5px;
	border: 1px solid #cccccc;
	padding: 5px 5px 5px 10px;
	height: 35px;
	font-size: 16px;
}
textarea{	border-radius: 5px;
	border: 1px solid #cccccc;
	padding: 5px 5px 5px 10px;
	font-size: 16px;}

select{	border-radius: 5px;
	border: 1px solid #cccccc;
	padding: 5px 5px 0px 5px;
	height: 37px;
	font-size: 16px;}

header{
	margin: 0px;
	padding: 0px;
}

.logo{
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	background-color: #FFF;
	padding-top: 10px;
	padding-bottom: 10px;
}
.logo img{

	width: 200px;
}

h1.page_title{
	font-size: 20px;
	color: #095cc8;
	padding: 30px 20px 0px 20px;
	text-align: center;
}


#base{	border: 1px solid #CCC;
	width: 100%;
	max-width: 600px;
	border-radius: 5px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 0px;
	background-color: #FFF;}


#base h1{ padding: 0px; font-size: 20px;margin: 0px 0px 35px 0px; display: block;color: #095cc8;}

#base h2{ padding: 0px; font-size: 18px;margin: 0px 0px 35px 0px; display: block}

#base h3{ padding: 0px; font-size: 16px;margin: 0px 0px 35px 0px; display: block}

#base h4{ padding: 0px; font-size: 14px;margin: 0px 0px 35px 0px; display: block}

#base h5{ padding: 0px; font-size: 12px;margin: 0px 0px 35px 0px; display: block}

#base h6{ padding: 0px; font-size: 10px;margin: 0px 0px 35px 0px; display: block}

#base h7{ padding: 0px; font-size: 8px;margin: 0px 0px 35px 0px; display: block}

footer{
	padding: 20px;
}

footer small{
	color: #666;
	text-align: center;
	display: block;
	margin: 0px;
	padding: 20px 0px 20px 0px;
	width: 100%;
}


#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 50px;
  bottom: 120px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 5%;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
	text-align: center;
}

#page_top a img{
	margin-top: 5px;
}

#page_top a::before{
  font-weight: 900;
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_bottom{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 50px;
  bottom: 50px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 5%;
  transform: scale(1,-1);
}

#page_bottom a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
	text-align: center;
}

#page_bottom a img{
	margin-top: 5px;
}

#page_bottom a::before{
  font-weight: 900;
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
@media screen and (max-width:600px){

  /*画面幅が600pxまでの時===============================================================================*/

.logo{
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	background-color: #FFF;
	padding-top: 5px;
	padding-bottom: 5px;
}


.logo img{

	width: 100px;
}
h1.page_title{
	font-size: 15px;
	color: #095cc8;
	text-align: center;
	margin: 15px 0px 0px 0px;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}

#base{
	width: 100%;
	border-radius: 0px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 0px;
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
}

#base h1{ padding: 0px; font-size: 20px;margin: 0px 0px 35px 0px; display: block;color: #095cc8;}

#base h2{ padding: 0px; font-size: 18px;margin: 0px 0px 35px 0px; display: block}

#base h3{ padding: 0px; font-size: 16px;margin: 0px 0px 35px 0px; display: block}

#base h4{ padding: 0px; font-size: 14px;margin: 0px 0px 35px 0px; display: block}

#base h5{ padding: 0px; font-size: 12px;margin: 0px 0px 35px 0px; display: block}

#base h6{ padding: 0px; font-size: 10px;margin: 0px 0px 35px 0px; display: block}

#base h7{ padding: 0px; font-size: 8px;margin: 0px 0px 35px 0px; display: block}
    

#page_top{
	width: 100%;
	height: 40px;
	position: static;
	right: 50px;
	bottom: 50px;
	background: #3f98ef;
	opacity: 0.6;
	border-radius: 0%;
}
#page_top a{
	position: relative;
	display: block;
	width: 100%;
	height: 35px;
	text-decoration: none;
	text-align: center;
}

#page_top a img{
	margin-top: 5px;
	width: 25px;
}

#page_top a::before{
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  position: absolute;
  width: 15px;
  height: 15px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_bottom{
	width: 100%;
	height: 40px;
	position: static;
	right: 50px;
	bottom: 50px;
	background: #3f98ef;
	opacity: 0.6;
	border-radius: 0%;
	transform: scale(1,-1);
}
#page_bottom a{
	position: relative;
	display: block;
	width: 100%;
	height: 35px;
	text-decoration: none;
	text-align: center;
}

#page_bottom a img{
	margin-bottom: 5px;
	width: 25px;
}

#page_bottom a::before{
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  position: absolute;
  width: 15px;
  height: 15px;
  top: -5px;
  bottom: 0px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


}

.errArea {
	color: red;
	text-align: left;
	background-color: #FFF9FF;
	max-width: 920px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	margin-bottom: 0px;
	border: 2px solid red;
	
}

.errArea div{
	background-image: url(../common/err_icon.svg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 20px;
	margin-bottom: 10px;
}

.errArea div:last-child{	margin-bottom: 0px;}

.successArea {
	color: #093;
	text-align: left;
	background-color: #F7FFF7;
	font-weight: bold;
	max-width: 900px;
	width: 100%;
	padding-left: 40px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 0px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	border: 2px solid #0C6;
	background-image: url(../common/access_icon.svg);
	background-repeat: no-repeat;
	background-position: left 20px center;
}

/*================

進捗バー

=================*/

.progress_area{	
    max-width: 600px;
	width: 100%;
    margin: 0px auto 20px auto;

}

.progressbar{	width: 80%;
    margin: 0px auto 0px auto;
   border: 1px solid #ccc;
border-radius: 5px;
height: 20px;
background-color: #FFF}

.progress_value{ background-color: #06C;height: 18px;border-radius: 5px 0px 0px 5px; font-size: 12px; font-weight: bold; color: #FFF; text-align: center; padding-top: 2px;}

.progressbar_num{ font-size: 12px; text-align: center; 
	width: 80%;
    margin: 0px auto 0px auto;
position: relative;
height: 20px}

.progressbar_num .num0{  width: 50px; position: absolute; top: 0px; left: -25px}

.progressbar_num .num100{width: 50px; position: absolute; top: 0px;right: -25px}