/*==================================================
 base
================================================== */


#container {
	font-size: 14px;
	word-wrap: break-word;
}
img {
	vertical-align: top;
}
@media only screen and (max-width: 640px) {
img {
	max-width: 100%;
	height: auto;
}
}

/* header */
header { border-top: 10px solid #40b5d3; }
header p {
	max-width: 960px;
	margin: 20px auto 30px;
}
@media screen and (max-width: 960px){
	header p { padding: 0 10px; }
}
@media screen and (max-width: 640px){
	header p { margin: 10px auto; }
	header p img { width:150px; }
	header { border-top: none; }
}
#container_grey{
	width: 100%;
	background-color: #f3f3f3;
	padding: 50px 0;
}
#container_blue{
	width: 100%;
	background-color: #0ac1fe;
	padding: 40px 0;
	margin-bottom: 50px;
}
#container_blue p{
	font-size: 20px;
	color: #fff;
	text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 640px){
#container_grey{
	width: 100%;
	background-color: #fff;
		padding: 0;

}
#container_blue{
	width: 100%;
	background-color: #0ac1fe;
	padding: 20px 0;
	margin-bottom: 20px;
}
#container_blue p{
	font-size: 15px;
	color: #fff;
	text-align: center;
  font-weight: bold !important;
  letter-spacing: -0.1em;
}
}
/* btn */
.btn_area{
	width: 720px;
	overflow: hidden;
}
.btn_area a{
		background-color: #fff;
}
.btn_area a:hover{
	opacity: 0.8;
}

.btn_area .btn01{
	width: 350px;
	height: 114px;
	background: url(../img/btn01.png) no-repeat center;
	float: left;
}
.btn_area .btn02{
	width: 350px;
	height: 114px;
	background: url(../img/btn02.png) no-repeat center;
	float: right;
}

.btn_area img {
	display: none;
}
	.pc{display: block;}
	.sp{display: none;}


@media screen and (max-width: 640px){
	.btn_area{
		width: 90%;
}

.btn_area .btn01, .btn_area .btn02 {
		width: 48%;
		height: auto;
		background: none;
		text-align: center;
}
	.btn01 img, .btn02 img {
	width: 100%;
		display: block;
}
		.pc{display: none;}
	.sp{display: block;}

}

/* wrap */
#wrap {
	max-width: 960px;
	margin: 0 auto;
}
#wrap a {
	color: #11a7d7;
	text-decoration: underline;
}
#wrap #mainContents { padding: 0; margin: 0; }
@media screen and (max-width: 960px){
	#wrap .column { padding: 0 10px; }
}
@media screen and (max-width: 640px){
	#wrap #mainContents { padding: 0 15px; }
}

/* h */
h1 {
	width: 960px;
	height: 380px/*2017.01.25修正*/;
	text-align: center;
	border-radius: 10px;
	margin: 0 auto;  
	background: url(../img/main.png) no-repeat center;
	margin-bottom: 50px;
}
h2 {
	width: 960px;
	height: 801px;
  /*height: 681px;
  height: 891px;*/
	margin: 0 auto;
	text-align: center;
	background: url(../img/img01.png) no-repeat center;
}

h1 img, h2 img {
	display: none;
}
h3{
	color: #ff98c9;
	font-weight: bold;
	text-align: center;
	font-size: 24px;
	margin-bottom: 10px;
}
@media screen and (max-width: 640px){
	h1, h2 {  
	width: auto;
	height: auto;
	background: none;
}
	h1 img, h2 img {
	display: block;
	}

	h1 { margin-bottom: 0; }
	h2 { margin: 20px 0; }

	h1 img, h2 img { width: 100%; }
	h3{
	font-size: 24px;
}

}

/* pagetop */
#wrap .pageBack,
#wrap .pagetop {
	margin: 90px 0 60px;
	padding-top: 0;
	font-size: 87%;
	font-weight: normal;
	text-decoration: underline;
	clear: none;
}
#wrap .pageBack { float:left; }
#wrap .pagetop { float:right; }
#wrap .pageBack a {
	padding-left: 13px;
	background: url(/registration/img/common/ico_link_arw.gif) 0 2px no-repeat;
	color: #666;
}
#wrap .pagetop a {
	padding-right: 13px;
	background: url(/registration/img/common/ico_pagetop.gif) 100% 2px no-repeat;
	color: #666;
}
#wrap .pageBack a:hover { background: url(/registration/img/common/ico_link_arw_on.gif) 0 2px no-repeat; }
#wrap .pagetop a:hover { background: url(/registration/img/common/ico_pagetop_on.gif) 100% 2px no-repeat; }
#wrap .pageBack a:hover,
#wrap .pagetop a:hover { color: #999; }
@media screen and (max-width: 640px){
#wrap .pagetop {
	margin: 40px 0 30px;
}
}
/* footer */
footer {
	height: 120px;
	background: url(/registration/img/common/bgimg_footer.png) center bottom no-repeat;
	background-size: cover;
	text-align: center;
	font-size: 87%;
	color: #fff;
	clear: both;
}
footer p { padding: 50px 0 0; }


/*==================================================
 index.html
================================================== */
/* step */
.step_txt{
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
}
.step_txt span{
	color: #000;
	font-weight: bold;
}

.step1 {
	width: 715px;
	height: 155px;
	text-align: center;
	margin: 0 auto;  
	background: url(../img/img02.png) no-repeat center;
}
.step2 {
	width: 715px;
	height: 182px;
	text-align: center;
	margin: 0 auto;  
	background: url(../img/img03.png) no-repeat center;
}
.step3 {
	width: 715px;
	height: 150px;
	text-align: center;
	margin: 0 auto 30px;  
	background: url(../img/img04.png) no-repeat center;
}

.step1 img, .step2 img, .step3 img {
	display: none;
}
@media screen and (max-width: 640px){
	.step_txt{
font-size: 14px;
	line-height: 1.5;
	margin-left:20px;
	margin-right:20px;
	text-align: left;
}

	.step1, .step2, .step3{
		width: auto;
		height: auto;
		background: none;
}
.step1 img, .step2 img, .step3 img {  
		display: block;
		width: 100%;
}
}


/* box */
.bgGrayBox {
	padding: 40px;
	background: #f3f3f3;
	border-radius: 10px;
}
.bgGrayBox p{
	font-size: 24px;
}
.bgGrayBox  ul li{
	padding-left: 1.0em;
	text-indent: -1.0em;
	font-size: 14px;
	margin-bottom: 10px;
}

@media screen and (max-width: 640px){
	.bgGrayBox { padding: 10px; margin: 0 10px;}
	.bgGrayBox p{text-align: center;}

}