@charset "UTF-8";

/* ---------------------------------
 width <= 767px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:767px) {
	.contactForm dl {
		width: 100%;
	}
	.contactForm dt {
		flex: 0 0 250px;
		padding: 10px 0;
	}
	.contactForm dd {
		flex: 1 1 400px;
		padding: 10px 0;
	}
/* less 767 */
}

/* ---------------------------------
 width <= 639px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:639px) {
	#company .googleMap {
		padding-bottom: 100%;
	}
	.city li {
		flex: 0 0 calc( 100% / 3 - 5px );
		padding: 5px 10px;
		margin: 0 0 10px;
	}
	.city:after {
		display: block;
		width: calc( 100% / 3 - 5px );
	}
	.city:before {
		display: none;
	}
	.contactForm dl {
		display: block;
	}
	.contactForm dt {
		padding: 10px;
		background-color: var(--pale-gray);
		font-weight: 500;
	}
	.contactForm dd {
		padding: 10px 0;
		margin: 0 0 20px;
	}
/* under 639 */
}

/* ---------------------------------
 width <= 360px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:360px) {
	.city li {
		flex: 0 0 calc( 50% - 5px );
		padding: 5px 10px;
		margin: 0 0 10px;
	}
	.city:after {
		display: block;
		width: calc( 50% - 5px );
	}
/* under 360 */
}


/* --- end of css --- */