/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
} /* end -599 */

@media (min-width: 600px) and (max-width:959px) {
} /* end 600-959 */

@media (min-width: 960px) {
} /* 960- */


/* ---------------------------------------- common */

/* 例：br.sp_brはタブレット以上のサイズでは非表示にする */
@media screen and (max-width: 514px) {
  .sp_br{
    display: none;
  }
}

/* ---------------------------------------- flyer */

#flyer figure { 
	border: 1px #333 solid; 
	text-align: center;
	padding: 1em;
}
#flyer figure + figure { margin: 1em 0 0; }

/* ---------------------------------------- step */

#step { padding: 5em 0; }

#step table th, 
#step table td {
	display: inline-block;
}

#step li { 
	border: 1px #208630 solid; 
	background: #ffffc6;
}

#step li th { 
	background: #208630;
	text-align: center;
	vertical-align: middle;
}
#step li td { 
	line-height: 1.5;
	padding: .5em 1em;
	vertical-align: middle;
}
#step li h3 { 
	color: #208630; 
	margin: 0 0 .25em;
}

@media (max-width: 768px) {

	#step ul:not(.contactinfo) li { 
		width: 100%; 
		max-width: 400px;
		font-size: 1.3rem;
		margin: 0 auto 1em;
	}
	
	#step ul:not(.contactinfo) li th { 
		width: 23%; 
		padding: 1.5em 1em;
	}
	
	#step ul:not(.contactinfo) li td { 
		width: 77%; 
	}

} /* end -599 */

@media (min-width: 769px) and (max-width:959px) {

	#step ul:not(.contactinfo) {
		display: -webkit-box;
		display: -webkit-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	#step ul:not(.contactinfo) li { 
		width: 46%; 
		font-size: 1.5rem;
		margin: 0 2% 2em;
	}
	
	#step ul:not(.contactinfo) li th { 
		width: 35%;
		padding: 1.75em 1.5em;
	}
	#step ul:not(.contactinfo) li td { width: 65%; }
	
} /* end 600-959 */

@media (min-width: 960px) {

	#step ul:not(.contactinfo) {
		display: -webkit-box;
		display: -webkit-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	#step ul:not(.contactinfo) li { 
		width: 32%; 
		font-size: 1.2rem;
	}
/*	#step ul:not(.contactinfo) li:nth-child(n+3) { margin: 2em 0 0; }*/
	#step ul:not(.contactinfo) li th { 
		width: 30%;
		padding: 1.5em;
	}
	#step ul:not(.contactinfo) li td { width: 70%; }

} /* 960- */

/* ---------------------------------------- branch */

#branch table { width: 100%; }
#branch th, #branch td {
	border: 1px #ccc solid;
	line-height: 1.6;
	vertical-align: middle;
	padding: 1em;
}
#branch th {
	background: #f5f5f5;
	font-weight: bold;
	text-align: center;
}
#branch h3 + p {
	color: #9c0003;
	text-align: center;
	margin: 0 0 1em;
}

#branch .photo { margin: 3em 0 0; }
#branch .photo li { position: relative; }
#branch .photo li::before {
	display: block;
	width: 2em;
	height: 2em;
	color: #fff;
	background: #009644;
	text-align: center;
	font-weight: bold;
	font-size: 2.0rem;
	line-height: 1;
	padding: .5em 0;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 4px;
	left: 4px;
}

#branch .photo li:nth-child(1)::before { content: "1"; }
#branch .photo li:nth-child(2)::before { content: "2"; }
#branch .photo li:nth-child(3)::before { content: "3"; }
#branch .photo li:nth-child(4)::before { content: "4"; }
#branch .photo li:nth-child(5)::before { content: "5"; }
#branch .photo li:nth-child(6)::before { content: "6"; }
#branch .photo li:nth-child(7)::before { content: "7"; }
#branch .photo li:nth-child(8)::before { content: "8"; }
#branch .photo li:nth-child(9)::before { content: "9"; }



@media (max-width: 768px) {

	#branch th { width: 20%; }
	
	#branch .photo li { text-align: center; }
	#branch .photo li + li { margin: 1.5em 0 0; }
	#branch .photo li img {
		width: 100%;
		max-width: 360px;
	}

} /* end -599 */

@media (min-width: 769px) {

	#branch th { width: 16%; }
	
	#branch .photo {
		display: -webkit-box;
		display: -webkit-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	#branch .photo li { 
		width: 48%;
		text-align: center;
	}
	#branch .photo li:nth-child(n+3){ margin: 2em 0 0; }

} /* 960- */