/* section1 */
.top_field {
	position: relative;
	width: 100%;
	height: 640px;
}

.top_image {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter:grayscale(40%);
}

.title_message {
	position: absolute;
	top: 30%;
	width: 100%;
	text-align: center;
	white-space: pre-line;
	font-size: 500%;
    font-weight: 800;
    color: #fff;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
}

.title_message .mob_sizing {
	display: inline-block;
}

/* section2 */
.famz_company {
	position: relative;
	width: 60%;
	margin:  0 auto;
	flex-wrap: wrap;
}

.table_head {
	width: 20%;
	padding: 2% 0;
	margin: 1% 0;
	border: 1px solid #c6c6c6;
	text-align: center;
}
.table_content {
	width: 70%;
	padding: 2%;
	margin: 1%;
	border: 1px solid #c6c6c6;
	white-space: pre-line;
}
.famz_company iframe {
	width: 40%;
	height: 200px;
	margin: 1%;
}
.famz_company .access_map {
	width: 55%;
	margin: 1%;
	white-space: pre-line;
}

/* section3 */
.famz_representative {
	position: relative;
	width: 100%;
	height: 500px;
	background-image: url('../image/favicon.png');
	background-position: 250px;
	background-repeat: no-repeat;
}
.famz_representative::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #ffffff, transparent)
}
.famz_representative:nth-child(2) {
	background-position: 70%;
}
.famz_representative:nth-child(2)::after {
	background: linear-gradient(-45deg, #ffffff, transparent)
}

.famz_representative .comment {
	width: calc(94% - 550px);
	height: 400px;
	padding: 2% 2% 2% 200px;
	margin: 3% 1% 3% 350px;
	color: #fff;
	border-radius: 10px;
	font-size: 18px;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	white-space: pre-line;
	background-color: rgba(20,60,125,0.8);
	z-index: 2;
}
.famz_representative:nth-child(2) .comment {
	padding: 2% 200px 2% 2%;
	margin: 3% 350px 3% 3%;
}


.com_alf_style {
	position: absolute;
	bottom: 50;
	right: 100;
	font-family: "WindSong", cursive;
	font-weight: 600;
	font-size: 400%;
	font-style: normal;
	opacity: 0.4;
	transform: rotate(-6deg);
}

.representative_img {
	position: absolute;
	top: -100px;
	left: 5%;
	width: 450px;
	height: 600px;
	z-index: 8;
}

.representative_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: drop-shadow(10px 2px 2px rgba(0, 0, 0, 0.5));
}

.famz_newmessage {
	position: relative;
	width: 100%;
}
.famz_newmessage .message_img {
	margin: 0 25%;
	width: 50%;
	border-radius: 10px;
}
.famz_newmessage .message_logo {
	position: absolute;
	top: 15%;
	left: 45%;
	width: 25%;
	opacity: 0.2;
}

/* section4 */
.service_explan {
	position: relative;
	width: 1000px;
	height: 600px;
	margin: 1% auto 50px auto;
	display: none;
	border: 1px solid #c6c6c6;
}
.service_explan img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.catalog {
	display: none;
}

.catalog_top {
	display: block;
	width: 48%;
	padding: 1%;
}
.catalog_top .head {
	padding: 1%;
	font-weight: 600;
	border-bottom: 2px double #c6c6c6;
}
.catalog_top .comment {
	padding: 5% 1%;
	white-space: pre-line;
}
.catalog_np_btn_area {
	position: absolute;
	bottom: -40px;
	width: 100%;
}
.catalog_np_btn {
	width: 30px;
    height: 20px;
    padding: 5px 0;
    border: 2px solid rgb(20,60,115);
	color: rgb(20,60,115);;
    text-align: center;
    border-radius: 16px;
	cursor: pointer;
}

.service_field {
	position: relative;
	flex-wrap: wrap;
	width: 100%;
}

.service_box {
	width: 22%;
	margin: 1%;
	border: 1px solid #c6c6c6;
	border-radius: 5px;
	cursor: pointer;
}
.service_box:hover {
	transform: scale(105%);
}

.box {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.box::before {
	content: "";
	padding-top: 100%;
	display:block;
}

.service_box p {
	position: absolute;
	top: 10px;
	left: 0;
	margin: 5px 0;
	padding: 2px 5px;
	font-weight: 600;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 9;
}
.service_box img {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* section5 */
.mail_form {
	position: relative;
	width: 80%;
	margin: 0 auto;
	padding: 10px 0;
}

.form_data ,
.form_comment
 {
	position: relative;
	width: 46%;
	height: fit-content;
	padding: 2%;
	white-space: pre-line;
}
.form_data 
 {
	background-color: #fff;
	border: 1px solid #c6c6c6;
	line-height: 14px;
}
.form_head {
	font-size: 120%;
	font-weight: 600;
	padding: 4px;
	border-bottom: 2px solid #c6c6c6;
}
.form_content {
	width: 80%;
	margin: 0 auto;
}

.form_content input ,
.form_content select {
	width: 90%;
	padding: 10px;
	font-size: 14px;
	margin: 0 auto;
}
.form_content textarea {
	width: 90%;
	height: 200px;
	padding: 10px;
	font-size: 14px;
	margin: 0 auto;
	resize: none;
}
.check_content {
	width: 90%;
	border: 1px solid #c6c6c6;
	padding: 10px;
	margin: 0 auto;
	line-height: normal;
}
.check_content input[type="checkbox"] {
	transform: scale(1.5);
	accent-color: rgb(20,60,115);
	appearance: auto;
	margin: 0 10px;
}
.form_check {
	width: 150px;
	text-align: center;
	padding: 10px;
	margin: 2px auto;
	background-color: #969696;
	color: #fff;
	cursor: pointer;
}

.mail_submit {
	width: 150px;
	padding: 20px;
	margin: 2px auto;
	background-color: rgb(20,60,125);
	font-size: 120%;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
.mail_submit:hover {
	background-color: rgb(76, 97, 130);
}
/* section6 */


/* option */
.section_spacer {
	position: relative;
	height: 85px;
}

.section_incomment {
	width: 60%;
	margin: 0 auto;
	padding: 0 2% 2% 2%;
	white-space: pre-line;
}

/* サイズ調整 */
@media only screen and (min-width: 1600px) {
	.famz_representative .comment {
		font-size: 24px;
	}
	.service_box {
		width: 17%;
	}
}
@media only screen and (max-width: 1000px) {
	.famz_representative {
		height: 350px;
		background-position: 0;
		background-size: contain;
	}

	.famz_representative .comment {
		width: calc(98% - 350px);
		height: 300px;
		padding: 1% 1% 1% 350px;
		margin: 3% auto;
		font-size: 1px;
	}
	.com_alf_style {
		font-size: 300%;
		right: 30px;
	}

	.representative_img {
		left: 0px;
		width: 300px;
		height: 450px;
	}

	.service_explan {
		width: 800px;
		height: 480px;
	}

}
/* モバイル表示 */
@media only screen and (max-width: 799px) {
	.top_field {
		overflow: hidden;
	}
	
	.top_image {
		position: absolute;
		top: 0;
		left: 0;
		width: 300%;
	}

	.title_message {
		font-size: 300%;
		top: 35%;
		background-color: rgba(0, 0, 0, 0.2);
		padding: 2% 0;
	}
	.title_message .mob_sizing {
		font-size: 30px;
		border-bottom: 2px solid #fff;
		margin: 4px 0;
	}
	.title_message span {
		display: inline-block;
	}

	.famz_company {
		width: 80%;
	}
	
	.table_head {
		width: 80%;
		font-weight: 600;
		padding: 2% 0;
		margin: 1% auto;
		border: none;
		border-bottom: 1px solid #c6c6c6;
	}
	.table_content {
		width: 94%;
		padding: 2%;
		margin: 1%;
		border: none;
		text-align: center;
	}

	.famz_representative {
		height: 350px;
		background-position: 0;
		background-size: contain;
	}

	.famz_representative .comment,
	.famz_representative:nth-child(2) .comment {
		width: calc(98% - 250px);
		height: 300px;
		padding: 1% 1% 1% 250px;
		margin: 3% auto;
		font-size: 14px;
	}

	.famz_newmessage .message_img {
		margin: 0 5%;
		width: 90%;
	}
	.famz_newmessage .message_logo {
		left: 30%;
		width: 40%;
	}

	.com_alf_style {
		font-size: 300%;
		right: 30px;
	}

	.representative_img {
		left: -70px;
		width: 300px;
		height: 450px;
	}

	.service_box {
		width: 30%;
	}

	.service_box p {
		top: initial;
		bottom: 0;
		width: calc(100% - 10px);
		height: 45px;
		font-size: 14px;
		font-weight: initial;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.service_explan {
		position: relative;
		width: 650px;
		height: 390px;
	}
	.mail_form {
		display: grid;
		width: 100%;
	}
	.form_data ,
	.form_comment {
		width: 96%;
		border: none;
	}
	.form_data {
		order: 2;
	}
	.form_comment {
		order: 1;
		font-size: 12px;
		color: #6c6c6c;
	}
	.famz_company iframe {
		width: 98%;
	}
	.famz_company .access_map {
		width: 98%;
	}
	.section_incomment {
		width: 90%;
	}

}
@media only screen and (max-width: 650px) {
	.famz_representative {
		height: 650px;
		background-position: 0;
		background-size: contain;
		margin-bottom: 3%;
	}

	.famz_representative .comment,
	.famz_representative:nth-child(2) .comment {
		width: 94%;
		height: 630px;
		padding: 2%;
		margin: auto;
		font-size: 16px;
	}
	.com_alf_style {
		font-size: 200%;
		right: initial;
		left: 0;
	}
	.famz_representative::after {
		background: linear-gradient(320deg,#ffffff, transparent);
	}
	.representative_img {
		top: 350;
		left: initial;
		right: -15px;
		width: 200px;
		height: 300px;
	}

	.representative_img img {
		filter: drop-shadow(-5px 2px 2px rgba(0, 0, 0, 0.4));
	}

	.service_explan {
		width: 360px;
		height: 216px;
	}
}