.pc_none {display: none;}


.logo1 ,.logo2{
	float: left;
}

div.center-tag{
text-align: center;
}

div.flex.space-between.margin-bottom{
	display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
	margin:0 0 3em;
}


.canbox{
	display: block;
	padding:20px;
	border:solid 3px #20754b;
	margin-bottom:30px;
	line-height: 1.6;
}

.step{
	display: flex;
	/* flex-wrap: wrap; */
	list-style: none;
	width: 100%;
  }
  .step li{
	position: relative;
    padding: 14px 30px;
    margin: 0 0 10px 0;
    background: #D1D1D1;
	font-size: 12px;
	font-weight: bold;
    /* flex: 0.33; */

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .step li:nth-child(1){
	flex:0.36;
  }

  .step li:nth-child(2){
	flex:0.36; 
  }

  .step li:nth-child(3){
	flex:0.28; 
  }
  
  /* 先端部分 */
  .step li::after{
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    height: 100%;
    width: 30px;
    background-size: cover;
	background-image: url('../img/bg_gray.png');
	background-position: center;
  }

  .step li:nth-child(1)::after{
	z-index: +3;

  }

  .step li:nth-child(2)::after{
	z-index: +2;

	}
	.step li:nth-child(3).active::after,
	.step li:nth-child(3)::after{
		z-index: +1;
		background-image: none;
	}
	
  /* 各ステップの色決め */
  .step li.active{
	background: #3CB149;
	color:#fff;
  }
  .step li.active::after{
	background-image: url('../img/bg_color.png');
  }

  .step li:nth-child(3).active::after{

  }

  .step li span{
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }

  
  .step li span em{
	font-weight: bold;
    font-style: normal;
    background-color: #818181;
    color: #fff;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25em 0.5em;
    margin: 0 0.5em;
    border-radius: 0.5em;
	}
	.step li.active span em{
		background-color: #fff;
		color: #111;
	}

	.step li span div{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.can-button {
		color: #1a1a1a;
		font-size: 16px!important;
		font-weight: 600!important;
		width: 400px!important;
		height: 32px!important;
		padding-top: 12px;
		margin: 20px auto 0!important;
		background-color: #b8ffbf;
		border: solid 1px #4bcc5a;
		border-radius: 5px 5px 5px 5px;
		vertical-align: middle;
		text-decoration: none;
	}

	

	.area-container .area-title {
		position: relative;
		margin: 0;
		padding:0.75rem 1rem 0.5rem;
		border-bottom: 1px solid #ccc;
		font-size: 1.25rem;
		font-weight: normal;
		color: #111;

		cursor: pointer;
		transition: all .2s;
	}
	.area-container .area-title:hover,
	.area-title.active {
		background-color: #006400;
		color: #fff;
		transition: all .2s;
	}
	.area-container .area-title:hover::before,
	.area-container .area-title:hover::after{
		background: #fff;
		transition: all .2s;
	}

	.area-container .area-title::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 25px;
		width: 15px;
		height: 1px;
		transform: rotate(90deg);
		background: #006400;
		transition: all .3s ease-in-out;
	}

	.area-container .area-title::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 25px;
		width: 15px;
		height: 1px;
		background: #006400;
		transition: all .2s ease-in-out;
	}
	.area-container .area-title.active::before {
		transform: rotate(180deg);
		background: #fff;
		transition: all .2s ease-in-out;
	}
	.area-container .area-title.active::after {
		opacity: 0;
		transition: all .2s ease-in-out;
	}
	.area-list-wrapper {
		display: none;
	}

	.area-list {
		display: flex;	
		margin: 2em 0 1em;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0;
	}

	.area-container .area-title > div{
		display: flex;
		width:calc(100% - 30px);
		justify-content: space-between;
		align-items: center;
		font-size: 20px;
	}
	.area-container .area-title > div span:nth-child(2){
		font-size: 16px;
	}
	.area-container .area-list li{
		max-width: calc(33.3% - 1em);
		width: 100%;
		border: solid 1px #006400;
		box-sizing: border-box;
		margin: 0 0.5em 1em;
		border-radius: 0.25em;
		transition: all .2s;
		text-align: left;
		background-color: #fff;
		display: block;
		font-size: 18px;
	}
	.area-container .area-list li:hover{
		transition: all .2s;
		background-color: #006400;

	}

	.area-container .area-list li a{
		width: 100%;
		display: block;
		text-decoration: none;
		padding: 0.5em 1em;
		color: #006400;
		box-sizing: border-box;
		font-weight: bold;
	}
	.area-container .area-list li:hover a{
		color: #fff;
	}

	.area-container .area-list li.all_booked{
		border: solid 1px #666;
		background-color: #ddd;
	}
	.area-container .area-list li.all_booked a{
		color: #666;
	}
	.area-container .area-list li.all_booked:hover a{
		color: #333;
	}
	.area-container .area-list li.all_booked:hover{
		background-color: #eee;
		border: solid 1px #333;
		color: #333;
	} 

	.submid.list-title {
		margin: 20px 0;
		font-size: 24px;
		font-weight: bold;
		color: #333;
		border-bottom: 2px solid #3CB149;
		padding: 0 0 1em;
		line-height: 2em;
	}
	.submid.list-title span{
		border: solid 2px #FFA300;
		padding: 0.05em 0.5em 0;
		margin: 0 0.5em;
		background-color: #FEFCBF;
	}


@media screen and (max-width:1023px){
	.pc_none {display: block;}
	.sp_none {display: none;}

	.area-container .area-list li {
		max-width: calc(50% - 1em);
		width: 100%;
		margin: 0 0.5em 0.5em;
		font-size: 16px;
	}


	.can-button {
		color: #1a1a1a;
		font-size: 16px!important;
		font-weight: 600!important;
		width: 90%!important;
		height: 50px!important;
		padding-top: 8px;
		margin: 20px auto 0!important;
		background-color: #b8ffbf;
		border: solid 1px #4bcc5a;
		border-radius: 5px 5px 5px 5px;
		vertical-align: middle;
		text-decoration: none;
	}

	body{

		width: 100vw;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	div#container{

	}
	table.FormMain p{
		margin-left: 0px!important;
	}
	
	.logo1{
		width: 45%;
		float: none;
	}
	
	.logo2{
		width: 70%;
		float: none;
	}
	
	input.button1{
		font-size: 20px!important;
		font-weight: bold;
		width: 100%!important;
		height: 80px!important;
		margin: 0px!important;
	}
	
	
	table.FormMain th{
		color: #fff!important;
		background-color: #20754b!important;
		width: 20%!important;
		padding: 10px,0 !important;
		font-size:9px;
	}
	
	table.FormMain sup{
		color: #fff!important;
		background-color: #a31111!important;
		font-size: 9px!important;
		width: 28px;
		text-align: center;
		float: left;
		height:20px;
		line-height: 20px;
		padding:0 3px;
		margin-top: 10px;
	}
	
	table.FormMain td{
		width:70%;
	}
	
	
	select ,input, text {
		font-size: 20px!important;
		height: 40px!important;
		border-radius: 4px!important;
		padding: 0px 10px !important;
	}
	
	input, text {
		font-size: 14px!important;
		margin:12px 0 12px 0!important;
		width: 90%!important;
	}
	
	select {
		font-size: 14px!important;
	}
	
	select#cu55{
		margin:12px 0 12px 0;
	}
	
	select#cua20,select#cua21,select#cua22, select#cua4{
		margin:12px 0 12px 0;
		width: 80%;
	}
	
	textarea{
		font-size: 14px!important;
		margin:12px 0 12px 0!important;
		width: 90%!important;
		padding: 8px;
	}
	
	input#cu10.itext{
		font-size: 14px!important;
		margin:12px 0 12px 0!important;
		width: 90%;
	}
	
	.submid{
		margin: 20px 0;
		font-size: 16px;
	}
	

	

	.f26{
		font-size:22px;
	}
	.f22{
		font-size:18px;
	}
	
	
	}



	@media screen and (max-width:726px){

		.head_tel{
			display: none;
		}
		div.flex.space-between.margin-bottom{
			justify-content: center;
			margin: 0 0 1em;
		}

		.step li {
			padding: 7px 10px;
			font-size: 0.7rem;
		}
		.step li span {
			flex-wrap: wrap;
		}
		.step li span em{
			font-size: 0.6rem;
			display: block;
		  }
		  .step li span em,
		  .step li span div span{
			display: none;
		}
		.step li span div{
			font-size: 0.7rem;
			display: block;
		  }
		.step li::after {
			right: -16px;
			width: 16px;
		}
		.step li:nth-child(1),
		.step li:nth-child(2),
		.step li:nth-child(3){
			flex:0.33;
		  }

	}

@media screen and (max-width:624px){
	.submid.list-title {
		font-size: 18px;
	}
	.area-container .area-list li {
		max-width: calc(100% - 1em);
		width: 100%;
		margin: 0 0.5em 1em;
		font-size: 18px;
	}
}