@charset "utf-8";

/* FIVE・S Website */


/*
===================================================
	header 
===================================================
*/

.mv h2#mainTitle {
	background-image: url(../company/img/bg_header.jpg);
}

/*
===================================================
	article
===================================================
*/

.article .doubleArea h2 {
	font-size: 1.6em;
	margin-bottom: 8px;
	line-height: 1.3;
}

/* -------------------------------------------
	message
------------------------------------------- */
.article #message {
	width: 325px;
	position: absolute;
	left: 40px;
	top: 40px;
}

.article #message p {
	/*color: #FFF;*/
}

/* -------------------------------------------
	simpleTbl
------------------------------------------- */
.simpleTbl {
	width: 100%;
	margin: 40px 0 20px 0;
	border-top: solid 1px #DDD;
}

.simpleTbl th {
	width: 175px;
	border-right: solid 1px #DDD;
}

.simpleTbl th,
.simpleTbl td {
	padding: 12px 7px 11px 12px;
	text-align: left;
	border-bottom: solid 1px #DDD;
	line-height: 1.7;
}

#contents .threeArea {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: end;
	flex-wrap: wrap;
	gap: 50px 25px;
}

#contents .threeArea .contentBox {
	width: 100%;
	max-width: 310px;
}



/* -------------------------------------------
	Google maps API
------------------------------------------- */

.gmap {
	width: 470px;
	height: 470px;
	margin: 12px 0 5px 0;
	background: #EEE;
	/* dummy */
}

.toMap {
	font-size: 1.2em;
	text-align: right;
}

#contents .threeArea .gmap{
	width: 310px;
	height: 310px;
}



/* -----  ------ */

/*
===================================================
	responsive 2024.03追加
===================================================
*/

/* message */
@media screen and (max-width: 950px) {
	#message p {
		text-shadow: 2px 1px #ddd;

	}
}

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

	.article #message {
		position: static;
		width: 94%;
		margin-top: 2em;
	}

	.article #message P {
		font-size: 1.6em;
		text-shadow: none;
	}
}

/* company__info */
@media screen and (max-width: 500px) {
	.company__info table tr {
		display: flex;
		flex-direction: column;
	}

	.simpleTbl th,
	.simpleTbl td {
		/* width: 95%; */
		width: 100%;
	}

	.simpleTbl th {
		background-color: #ddd;
		padding: 12px 10px;
		line-height: 1;
	}

	.simpleTbl td {
		padding-bottom: 30px;
	}
}

/* accessMap */
@media screen and (max-width: 980px) {
	#contents .doubleArea {
		display: flex;
		gap: 30px;
	}

	#contents .doubleArea .leftBox {
		width: calc((100% - 30px) / 2);
		float: none;
		display: flex;
		flex-direction: column;
	}

	#contents .doubleArea .rightBox {
		width: calc((100% - 30px) / 2);
		float: none;
		display: flex;
		flex-direction: column;
	}

	#contents .doubleArea address {
		flex-grow: 1;
	}
}

@media screen and (max-width: 640px) {
	#contents .doubleArea {
		flex-direction: column;
		width: 95%;
		margin-inline: auto;
		align-items: center
	}

	#contents .doubleArea .leftBox {
		width: 470px;
		max-width: 100%;
	}

	#contents .doubleArea .rightBox {
		width: 470px;
		max-width: 100%;
	}
}



/* END */