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

/*
top
*******************************/

#top{
	background-color:#fff;
	min-width: 1060px;
}

#top .contents_wrap{
	box-sizing:border-box;
	padding:0 30px 30px;
	overflow: hidden;
}

#top .contents_wrap #block0{
	background-image:url(../images/common/main_bg.jpg);
	padding-top: 80px;
	border-radius:2px;
	border-radius: 10px;
	overflow: hidden;

}

#top .contents_wrap #block0 .contents_inner{
	width:100%;
	margin:0 auto;
	position:relative;
	width:1000px;
	padding-bottom: 12%;
}

#top .contents_wrap #block0 .section_block{
	position:relative;
	background-image:url(../images/common/section_bg.png);
	background-repeat:no-repeat;
	padding: 4.4% 0px;
	max-width:880px;
	margin:0 auto;
	background-size:100%;
}

#top .contents_wrap #block0 h1{
	text-align:center;
	color:#13201a;
	margin:0 auto;
}

#top .contents_wrap #block0 h1 img{
	width:100%;
	height:auto;
}

#block0 h1{
	max-width:125px;
	width:14.2%;
}

#top .contents_wrap #block0 .section_block h1 .mask,
#main .contents_wrap>[id^='block'] .section_block h1 .mask{
	position: absolute;
	top: 0;
	right: 0;
	max-width: 1016px;
	width: 115.4%;
	-webkit-transition:-webkit-transform 0.8s ease-out;
	-ms-transition:-ms-transform 0.8s ease-out;
	transition:transform 0.8s ease-out;
}

#top .contents_wrap #block0.show .section_block h1 .mask,
#main .contents_wrap>[id^='block'].show .section_block h1 .mask{
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

#block0 .text_area{
	max-width:880px;
	margin:0 auto;
	margin-top: 3.2em;
	position:relative;
}

#block0 p{
	font-size: 1.12em;
	text-align:center;
	color:#374740;

}

#block0 p.text_0{
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block0.show p.text_0,
#block0.show p.option,
#block0.show p.option2{
	opacity:1;
}

#block0 p.option,
#block0 p.option2{
	text-align: left;
	width: 66.59%;
	margin: 0 auto;
	max-width: 566px;
	font-size: 0.875em;
	margin-bottom: 1em;
	text-indent: -6em;
	padding-left: 6em;
	-webkit-transition:opacity 0.3s ease-out 1.7s;
	-ms-transition:opacity 0.3s ease-out 1.7s;
	transition:opacity 0.3s ease-out 1.7s;
	opacity:0;
}

#block0 p.option2{
	font-size: 18px;
	padding: 0;
	text-indent: -1.8em;
}

#block0 p.option2 span{
	font-weight:bold;
}

#block0 ul{
	margin-top: 3.3em;
	margin-bottom: 3.5em;
}

#block0 li{
	background-color: #ffe500;
	clear: both;
	width: 85.22%;
	max-width:750px;
	box-sizing: border-box;
	padding: 1.3em 4.7%;
	margin:0 auto;
	margin-bottom: 2em;
	border-radius: 0.5em;
	position:relative;
	background-image:url(../images/join/block0_arrow.png);
	background-size: 3%;
	background-repeat:no-repeat;
	background-position: 96.57% center;
	cursor:pointer;
	opacity:0;
}

#block0.show li{
	opacity:1;
}

#block0 li:nth-child(1){
	-webkit-transition:opacity 0.3s ease-out 1.1s;
	-ms-transition:opacity 0.3s ease-out 1.1s;
	transition:opacity 0.3s ease-out 1.1s;
}

#block0 li:nth-child(2){
	-webkit-transition:opacity 0.3s ease-out 1.3s;
	-ms-transition:opacity 0.3s ease-out 1.3s;
	transition:opacity 0.3s ease-out 1.3s;
}

#block0 li:nth-child(3){
	-webkit-transition:opacity 0.3s ease-out 1.5s;
	-ms-transition:opacity 0.3s ease-out 1.5s;
	transition:opacity 0.3s ease-out 1.5s;
}

#block0 li p,
#block0 li a p{
	text-decoration:none;
	color:#000;
	text-align:center;
	font-size: 1.12em;
}

#block0 .pic_1{
	max-width: 169px;
	width: 16.9%;
	position: absolute;
	left: -2.2%;
	bottom: -11%;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

#block0 .pic_2{
	max-width:144px;
	width:14.4%;
	position:absolute;
	right:0;bottom:-1%;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

#block0 .pic_1 img,
#block0 .pic_2 img{
	width:100%;
	height:auto;
}

#block0.show .pic_1,
#block0.show .pic_2{
	-webkit-animation:pic1 0.5s ease-out 1.8s forwards;
	animation:pic1 0.5s ease-out 1.8s forwards;
}

@-webkit-keyframes pic1{
	0%{-webkit-transform: translateY(540px);}
 33%{-webkit-transform: translateY(-17px);}
 66%{-webkit-transform: translateY(8px);}
100%{-webkit-transform: translateY(0px);}
}

@keyframes pic1{
	0%{transform: translateY(540px);}
 33%{transform: translateY(-17px);}
 66%{transform: translateY(8px);}
100%{transform: translateY(0px);}
}


/*
main
*******************************/
#main .contents_wrap>[id^='block']{
	background-image:none;
	background-color:#fff;
	overflow: hidden;
}

#main .contents_wrap>[id^='block'] .section_block{
	background-image:url(../images/join/section_bg.png);
	padding: 3.8% 0px;
}

#main .contents_wrap>[id^='block'] .section_block h1 .mask{
	position: absolute;
	top: 0;
	right: 0;
	max-width: 1016px;
	width: 115.4%;
	-webkit-transition:-webkit-transform 0.8s ease-out;
	-ms-transition:-ms-transform 0.8s ease-out;
	transition:transform 0.8s ease-out;
}

#main .contents_wrap>[id^='block'].show .section_block h1 .mask{
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

#block01 h1{
	max-width: 468px;
	width: 53.18%;
}

#block02 h1{
	max-width: 807px;
	width: 91.7%;
}

#block03 h1{
	max-width: 426px;
	width: 48.4%;
}

#block01 .left_column{
	float:left;
	max-width:400px;
	width:40%;
	margin-left: 6%;
	margin-top: 2.4em;
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block01 .left_column p{
	font-size: 1.12em;
	margin-bottom: 2em;
	color:#374740;
}


#block01 .right_column{
	float:right;
	max-width: 470px;
	margin-right:3.2%;
	margin-top: 2.8%;
	width:53.1%;
	-webkit-transition:opacity 0.3s ease-out 1.1s;
	-ms-transition:opacity 0.3s ease-out 1.1s;
	transition:opacity 0.3s ease-out 1.1s;
	opacity:0;
}

#block01.show .left_column,
#block01.show .right_column{
	opacity:1;
}

#block01 .right_column img{
	width:100%;
	height:auto;
}

#block02 .text_area p{
	text-align:center;
	font-size: 1.12em;
	color:#374740;
}

#block02 .text_area p.text_2{
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block02.show .text_area p.text_2{
	opacity:1;
}

#block02 .text_area{
	margin-top: 2.5em;
}

#block02 .text_area p span{
	font-size:0.8em;
}

#block02 .form_area{
	background-color:#f1f0eb;
	padding: 2.2em 0;
	max-width: 880px;
	margin: 0 auto;
	margin-top: 3.3em;
	-webkit-transition:opacity 0.3s ease-out 1.1s;
	-ms-transition:opacity 0.3s ease-out 1.1s;
	transition:opacity 0.3s ease-out 1.1s;
	opacity:0;
}

#block02.show .form_area{
	opacity:1;
}

#block02 .form_area h3{
	text-align:center;
	font-weight:bold;
	color:#374740;
	margin-bottom: 2em;
}

#block02 .form_area .link_btn{
	max-width:750px;
	width:85.22%;
	margin:0 auto;
	margin-bottom: 1.8em;
	-webkit-transition:opacity 0.3s ease-out;
	-ms-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
}

#block02 .form_area .link_btn:last-child{
	margin-bottom:0;
	-webkit-transition:opacity 0.3s ease-out 0.2s;
	-ms-transition:opacity 0.3s ease-out 0.2s;
	transition:opacity 0.3s ease-out 0.2s;
}

#block02 .form_area .link_btn img{
	width:100%;
	height:auto;
}

#block02 dl{
	margin-bottom: 2.5em;
}

#block02 dt{
	width: 12.04%;
	max-width: 105px;
	float: left;
	color: #374740;
	font-weight: bold;
	line-height: 3.5em;
	margin-left: 15%;
	font-size: 1.12em;
}

#block02 dd{
	width:57.04%;
	max-width:502px;
	float:right;
	margin-right: 15%;
}

#block02 .select_box{
	position: relative;
	background-image:url(../images/join/select_arrow.png);
	background-repeat:no-repeat;
	background-position:right top;
	width: 100%;
	height: 3.8em;
	background-size: 9.32%;
	background-color: #fff;
}

#block02 .select_value {
	padding-left: 306px;
	padding-top: 10px;
	height: 46px;
	box-sizing: border-box;
	display: none;
	width: 762px;
}

#block02 select{
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	background-image:url(../images/join/select_arrow.png);
	background-size: 9.32%;
	background-color: #fff;
	background-position: right top;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
	color: #8b9e95;
	font-size: 1.12em;
	padding-left: 5%;
}

#block02 select option {
	opacity: 1;
	text-indent: 1em;
	line-height: 2;
	text-align: center;
}

#block03 .text_area{
	margin-top: 2.4em;
}

#block03 .text_area p{
	text-align: left;
	font-size: 1.12em;
	color: #374740;
	margin: 0 auto;
	margin-bottom: 1.3em;
	line-height: 2;
}

#block03 .text_area p.text_3{
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block03.show .left_column, #block03.show .right_column{
	opacity: 1;
}

#block03 .left_column{
	max-width: 510px;
	float: left;
	margin-left: 6%;
	-webkit-transition: opacity 0.3s ease-out 1.1s;
	-ms-transition: opacity 0.3s ease-out 1.1s;
	transition: opacity 0.3s ease-out 1.1s;
	opacity: 0;
}

#block03 .right_column{
	max-width: 361px;
	float: right;
	margin-bottom: 70px;
	margin-right: 75px;
	-webkit-transition: opacity 0.3s ease-out 1.1s;
	-ms-transition: opacity 0.3s ease-out 1.1s;
	transition: opacity 0.3s ease-out 1.1s;
	opacity: 0;
}



#block03 .link_btn{
	max-width:750px;
	width:85.22%;
	margin:0 auto;
	margin-top: 3.4em;
	-webkit-transition:opacity 0.3s ease-out 1.1s;
	-ms-transition:opacity 0.3s ease-out 1.1s;
	transition:opacity 0.3s ease-out 1.1s;
	opacity:0;
}

#block03 .link_btn:hover{
	-webkit-transition:none;
	-ms-transition:none;
	transition:none;
}

#block03 .link_btn img{
	width:100%;
	height:auto;
}

#block03.show .text_area p.text_3,
#block03.show .link_btn{
	opacity:1;
}

.prefTel{
  position: relative;
}

#block02 .text_area .prefTel p{
  position: absolute;
  width: 260px;
  font-size: x-large;
  color: white;
  top: 15px;
  left: 420px;
}

/*笠貫2017年12月21日追記*/
.prefURL{
  position: relative;
}

#block02 .text_area .prefTel p.text{
  position: absolute;
  width: 270px;
  font-size: 18px;
  color: white;
  top: 21px;
  left: 139px;
}
#block02 .text_area .prefURL p.text{
  position: absolute;
  width: 384px;
  font-size: 18px;
  color: white;
  top: 21px;
  left: 139px;
}

@media screen and (max-width: 750px) {
#block02 .text_area .prefTel p.text{
  position: absolute;
  width: 225px;
  font-size: 14px;
  color: white;
  top: 13px;
  left: 27px;
	}
}
@media screen and (max-width: 750px) {
#block02 .text_area .prefURL p.text{
  position: absolute;
  width: 227px;
  font-size: 14px;
  color: white;
  top: 4px;
  left: 30px;
	}
}
/*笠貫2017年12月21日追記終了*/

@media screen and (max-width: 750px) {
	#top{
		min-width:inherit;
		background-color:#389bf4;
		padding-top: 17vw;
	}
	
	#main .contents_wrap{
		padding: 2vw 4.9% 1.5em;
	}

	#top .contents_wrap{
		padding: 2.5em 4.6%;
	}

	#top .contents_wrap #block0{
		box-sizing: border-box;
		padding: 4.8em 6.6% 0;
		border-radius: 0.5em;
		margin-bottom:0;
		overflow:visible;
	}
	

	#top .contents_wrap #block0 .contents_inner{
		width:auto;
		padding-bottom: 0;
	}

	#top .contents_wrap #block0 h1{
		width: 100%;
		max-width: inherit;
	}

	#top .contents_wrap #block0 h1 p{
		font-size: 1em;
		letter-spacing: 0.1em;
		line-height: 1.2;
		position:absolute;
		width:100%;
		top:50%;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
	}

	#top .contents_wrap #block0 h1 strong{
		background-color: #389bf4;
		color: #fff;
		font-weight:bold;
		padding: 0.2em;
	}

	#top .contents_wrap #block0 h1 p span{
		color: #8b9e95;
		font-size: 0.65em;
		letter-spacing: 0;
		font-weight:bold;
	}

	#top .contents_wrap #block0 .section_block{
		max-width:inherit;
		margin-bottom: 4em;
		background-image: none;
		padding: 0;
		position: relative;
	}

	#block0 .text_area p{
		font-size: 1.6em;
		text-align:left;
	}

	#block0 li{
		width: 100%;
		background-size: 5%;
		padding: 2em 4.7%;
		margin-bottom: 1.7em;

	}

	#block0 .text_area p.link_text{
		text-align:center;
	}

	#block0 p.option,
	#block0 p.option2{
		width:100%;
		max-width:inherit;
		text-indent:0;
		padding-left:0;
	}

	#block0 p.option2{
		font-size:1.9em;
	}

	#block0 .pic_area{
		width: 79.32%;
		margin: 0 auto;
		margin-bottom: -10px;
	}




	#main .contents_wrap>[id^='block'] .section_block{
		background-image:none;
		padding:0;
	}

	#main .contents_wrap>[id^='block'] h1 p{
		line-height:1.5;
	}

	#block01 .left_column{
		float:none;
		width:100%;
		margin:0 auto;
		max-width:inherit;
		font-size: 1.6em;
	}

	#block01 .right_column {
		float:none;
		width: 82.54%;
		margin:0 auto;
		margin-left: 4%;
		max-width:inherit;
	}

	#main .contents_wrap #block02{
		padding: 4.8em 0;
	}

	#main .contents_wrap #block02 .section_block{
		padding:0 6.6%;
	}

	#main .contents_wrap #block02 h1 p{
		left:0;
	}

	#main .contents_wrap #block02 h1 p.triple strong{
		line-height:1.8;
	}

	#block02 .text_area p{
		font-size: 1.6em;
		text-align:left;
		padding:0 6.6%;
	}

	#block02 .form_area{
		padding:3.4em 0;
	}

	#block02 .form_area h3{
		font-size: 1.6em;
		margin-bottom: 0em;
	}

	#block02 dt{
		width: 100%;
		float: none;
		text-align: center;
		max-width: inherit;
		margin: 0 auto;
		font-size: 1.6em;
	}

	#block02 dd{
		width: 86.76%;
		max-width: inherit;
		float: none;
		margin: 0 auto;
	}

	#block02 .select_box{
		height: 6.8em;
	}

	#block02 select{
		font-size: 1.6em;
		background-size: 13.32%;
	}
	
	#block03 .left_column{
		max-width: inherit;
		float: none;
		margin: 0 auto;
		margin-bottom: 8vw;
	}
	
	#block03 .right_column{
		max-width: inherit;
		float: none;
		width: 78%;
		margin: 0 auto;
	}
	
	#block03 .right_column img{
		width:100%;
		height:auto;
	}

	#block03 .text_area p{
		width: 100%;
		text-align: left;
		font-size: 1.6em;
		line-height: 1.6;
	}

	#block03 .link_btn{
		width: 100%;
		max-width: inherit;
	}
}



/* 長田0611追記 */

  #block02 .link_btn {
	  margin-top: 3.2em;
	  text-align:center;

  }
   
  #block02 .link_btn .sp_only {
    max-width: 750px;
    width: 85.22%;
    margin: 0 auto;
  }
  
  
  #block02 .text_3 {
	  margin-top: 3.2em;

  }
  
 #block02 .text_3 .sp_only {
	 text-align:center;
 }
  

#block02.show  .text_3 {
    opacity: 1;
}
#block02  .text_3 {
    -webkit-transition: opacity 0.3s ease-out 1.4s;
    -ms-transition: opacity 0.3s ease-out 1.4s;
    transition: opacity 0.3s ease-out 1.4s;
    opacity: 0;
}

#block02.show  .link_btn {
    opacity: 1;
}
#block02  .link_btn {
    -webkit-transition: opacity 0.3s ease-out 1.7s;
    -ms-transition: opacity 0.3s ease-out 1.7s;
    transition: opacity 0.3s ease-out 1.7s;
    opacity: 0;
}