@charset "UTF-8";
/* CSS Document */
/*
Theme Name: ムラアーカム
Author: ZoDDo.Inc
Description: 愛知、岐阜、三重を中心に看板デザインからホームページ制作までトータルデザイン事務所ゾッドのホームページです。。
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;/*基本を16pxで設定*/
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
line-height: 1.8;
vertical-align: baseline;
-webkit-text-size-adjust: 100%;
box-sizing: border-box;
}
a{
	text-decoration: none;
}
.fade_sample {
	/*変化にかかる時間とタイミング、進行具合を指定*/
	-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;  
}
/*オンマウス時に実行*/
.fade_sample:hover {
	/*透明度具合を指定*/
	opacity: 0.4;  
	filter: alpha(opacity=60);  
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
/*ローディング*/
#loading{
	display: none;
}
#loading.opening{
	display: flex;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgb(2,125,199);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	text-align:center;
}
#loading.hide{
	display: none;
}
.open{
	position: absolute;
	width: 20%;/* 500px */
	height: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.open2{
	animation: opening 1s ease forwards;
}
@keyframes opening{
	from{
		opacity: 0;
		transform: translateY(100px);
	}
	to{
		opacity: 1;
		transform: translateY(0)
	}
}
.open3{
	position: absolute;
	width: 500px;/* 500px */
	height: 280px;/* 200px */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
}
.open4{
	animation: opening2 1s ease forwards;
}
@keyframes opening2{
	from{
		opacity: 0;
		transform: translateY(50px);
	}
	to{
		opacity: 1;
		transform: translateY(0)
	}
}
#wrapper{
	position: relative;
}
#contant{
	margin: auto;
}
.box{
	width: 100%;
	margin: auto;
}
.box1{
	width: 100%;/*1368px*/
	max-width: 1300px;
	margin: auto;
}
.box2{
	width: 100%;/*1380px*/
	max-width: 1200px;
	margin: auto;
}
.hidden{
	overflow: hidden;
}
/*---------------------------------------------------------------------------------------------------------------*/
/* ----フォント関連 ----*/
.com_title1{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: clamp(1.688rem, 1.57rem + 0.24vw, 1.875rem);/* 30px */
	font-weight: bold;
	font-style: normal;
	line-height: 1.5;
}
.com_title2{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: clamp(1.438rem, 1.32rem + 0.24vw, 1.625rem);/* 26px */
	font-weight: bold;
	font-style: normal;
	line-height: 1.5;
}
.com_title3{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: clamp(1.938rem, 1.82rem + 0.24vw, 2.125rem);/* 34px */
	font-weight: bold;
	font-style: normal;
	line-height: 1.5;
}
.en_title1{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: clamp(1.938rem, 1.82rem + 0.24vw, 2.125rem);/* 34px */
	font-weight: 700;
	font-style: normal;
	line-height: 2;
}
.en_title2{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: clamp(1.063rem, 0.945rem + 0.24vw, 1.25rem);/* 28px */
	font-weight: 700;/* 700 */
	font-style: normal;
	line-height: 2;
}
.en_title3{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: clamp(1.938rem, 1.82rem + 0.24vw, 2.125rem);/* 34px */
	font-weight: 700;/* 700 */
	font-style: normal;
	line-height: 2;
}
.box_title1::before{
	content: '';
	display: block;
	width: 60px;/* 60px*/
	height: 65px;/* 60px*/
	margin: 0 auto 10px;
	padding: 20px 0;/* 20px 0*/
	background: url("img/common/title-tag2.png");
	background-size: cover;
}
.box_title2::before{
	content: '';
	display: block;
	width: 60px;/* 60px*/
	height: 65px;/* 60px*/
	margin: 0 auto 10px;
	padding: 1.39vw 0;/* 20px 0*/
	background-image: url("img/common/title-tag.png");
	background-size: cover;
}
.box_title3::before{
	content: '';
	display: block;
	width: 60px;/* 60px*/
	height: 60px;/* 60px*/
	margin: auto;
	padding: 1.39vw 0;/* 20px 0*/
	background-image: url("img/common/box_title3.png");
	background-size: cover;
}
.line-title1::after{
	content: '';
	display: block;
	width: 60px;/* 60px*/
	margin: auto;
	border-bottom: 4px solid #D20003;
}
.af-line::after{
	display: block;
	content: '';
	width: 90px;/* 90px */
	border-top: 10px solid #0065BD;
	margin: auto;
	border-radius: 10px;
}
.line-title2{
	display: inline-block;
	border-bottom: 3px solid #6c2735;
	margin-top: 4px;
}
/*--------------- 縦書き----------------------*/
.font1{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 17px;/* 17px */
	font-weight: normal;
	font-style: normal;
	line-height: 2;
}
.font2{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 16px;/* 16px */
	font-weight: normal;
	font-style: normal;
	line-height: 2;
}
/*-------------------------------*/
.green{
	color: rgb(2,104,55);
}
.pink{
	color: #c70067;
}
.blue{
	color: #0068b7;
}
.white{
	color: #FFFFFF;
}
/*-------------------------------*/
.m-top10{
	margin-top: 1.15%;/* 15px */
}
.m-top30{
	margin-top: 2.69%;/* 35px */
}
.m-top50{
	margin-top: 55px;/* 55px */
}
/*--------------------------*/
.f-center{
	display: flex;
	margin: auto;
	justify-content: center;
}
.center{
	text-align: center;
}
.s-center{
	text-align: center;
}
/*-----------------------------------------------------------*/
.gnav-btn2{
	display: none;
}
.g-nav2{
	display: none;
}
.phone-mark{
	display: none;
}
.mail-mark{
	display: none;
}
/*========================  　背景画像　　======================================================================*/
.bg-img1{
	background-image: url("img/common/bg-img1.jpeg");
	background-size: cover;
	background-position: center middle;
}
.bg-img2{
	background-image: url("img/common/bg-img2.jpg");
	background-size: cover;
	background-position:center;
}
.bg-img3{
	background-image: url("img/common/bg-img3.jpg");
	background-size: cover;
	background-position:center;
}
.bg-img4{
	background-image: url("img/common/bg-img4.jpg");
	background-size: cover;
	background-position:center;
}
.bg-img5{
	background-image: url("img/common/bg-img5.jpg");
	background-size: cover;
	background-position: center;
	vertical-align: middle;
}
.bg-img6{
	background-image: url("img/common/bg-img6.jpg");
	background-size: cover;
}
.bg-img7{
	background-image: url("img/common/bg-img7.jpg");
	background-size: cover;
}
/*---------------------  背景カラー　--------------------------------*/
.bg-black{
	background: #000000;
}
.bg-white{
	background:#FFFFFF;
}
.bg-gray{
	background:rgba(245,245,245,0.8);
}
/* 改行コード-----------------*/
.pc-br{
	display: block;
}
.sp-br{
	display: none;
}
/*---スマホメニュー　----*/
#sp-header{
	display: none;
}
/*------------------------------------  コンテンツcss ------------------------------------------------------------*/
#home-head{
	position: relative;
	width: 100%;
	height: auto;/* 900px */
	background: url("img/home/m-img1.jpg");
	background-size: cover;
}
#home-head::after{
	content: '';
	display: block;
	padding-top: 56%;
}
#in-header{
	position: absolute;
	display: block;
	width: 100%;
	height: 8%;/* 80px */
}
/*----下層ページのpメニューの高さ---*/
#in-header2{
	position: absolute;
	display: block;
	width: 100%;
	height: 20%;/* 60px */
}
/*-------*/
#hd-logo{
	position: absolute;
	width: 12.5%;/* 200px */
	height: auto;/* 80px */
	top: 0;
	bottom: 0;
	left: 2%;
	margin: auto;
}
#hd-menu-box{
	position: absolute;
	width: 80%;/*  1280px */
	height: 100%;/* 80px */
	background: rgb(2,104,55);
	right: 0;
}
#hd-menu-box:before{
	position: absolute;
	content: '';
	display: block;
	width: 6%;
	height: 100%;/* 80px */
	top: 0;
	bottom: 0;
	left: -3%;
	background: rgb(2,104,55);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/*----下層ページのpメニューの高さ---*/
#hd-menu-box2{
	position: absolute;
	width: 80%;/*  1280px */
	height: 100%;/* 80px */
	background: rgb(2,104,55);
	right: 0;
}
#hd-menu-box2:before{
	position: absolute;
	content: '';
	display: block;
	width: 6%;
	height: 100%;/* 80px */
	top: 0;
	bottom: 0;
	left: -3%;
	background: rgb(2,104,55);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/*------------------------------*/
#hd-menu{
	position: absolute;
	width: 89.8%;/* 1150px */
	height: 100%;/* 80px */
	margin: auto;
	top: 0;
	bottom: 0;
	right: 0;
	list-style: none;
}
#hd-menu li{
	display: inline-block;
	color: #FFFFFF;
	font-family: "M PLUS 1p";
	font-size: clamp(0.688rem, 0.398rem + 0.6vw, 1rem);/* 16px */
	line-height: 1;
	padding: 1.2% 1.1% 0;/* 20px 10px 0*/
	vertical-align: top;
	text-align: center;
}
#hd-menu li a{
	color: #FFFFFF;
	text-decoration: none;
}
.sub-menu1::after{
	content: '流動化処理土';
	display: block;
	font-size: clamp(0.5rem, 0.21rem + 0.6vw, 0.813rem);/* 13px */
	text-align: center;
}
/*--------
.sub-menu2::after{
	content: '建設汚泥処理・建設発生土処理';
	display: block;
	font-size: 13px;
	text-align: center;
}
--*/
.hd-sousyoku{
	position: absolute;
	display: block;
	width: 41.3%;
	height: 8%;/* 80px */
	background: rgb(2,104,55);
	bottom: 0;
	left: 0;
}
.hd-sousyoku:after{
	position: absolute;
	content: '';
	display: block;
	width: 12%;
	height: 100%;/* 80px */
	top: 0;
	bottom: 0;
	right: -6%;
	background: rgb(2,104,55);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.m-msg1{
	position: absolute;
	width: 50.3%;/* 500px */
	height: 8.1%;/* 130px */
	font-size: clamp(1.688rem, 0.895rem + 1.6vw, 2.5rem);/* 27 - 40px */
	font-weight: bold;
	margin: auto;
	top: 44.4%;/* 400px */
	left: 0;
	right: 0;
	text-align: center;
}
.m-msg2{
	position: absolute;
	width: 25%;/* 400px */
	height: 8.1%;/* 130px */
	font-size: clamp(0.438rem, -0.111rem + 1.11vw, 1rem);/*7 -  16px */
	font-weight: bold;
	color: #FFFFFF;
	top: 11%;/* 100px */
	right: 0;
}
/*-------------------*/
footer{
	position: relative;
	background: rgb(2,104,55);
}
#in-footer1{
	position: relative;
	height: auto;/* 460px */
	background: url("img/common/footer-back1.png");
	background-size: cover;
}
#in-footer1::after{
	content: '';
	display: block;
	padding-top: 28.7%;
}
.ft-ct-title{
	position: absolute;
	width: 46.8%;/* 790px */
	height: 5.6%;/* 90px */
	vertical-align: middle;
	background: #FFFFFF;
	text-align: right;
	color: rgb(2,104,55);
	font-size: clamp(1.438rem, 1.206rem + 0.48vw, 1.688rem);/* 27px */
	font-weight: bold;
	line-height: 1;
	padding: 2% 1.5%;/* 30px 30px */
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.ft-ct-title::after{
	position: absolute;
	content: '';
	display: block;
	width: 7%;
	height: 100%;/* 90px */
	top: 0;
	bottom: 0;
	right: -3.5%;
	background: #FFFFFF;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ct-title-img{
	position: absolute;
	display: block;
	width: 35.4%;/* 280px*/
	height: auto;/* 70px */
	top: 0;
	bottom: 0;
	right: 25.3%;/* 200px */
	margin: auto;
}
#in-footer2{
	position: relative;
}
#in-footer2-2{
	position: relative;
	height: auto;/* 550px */
}
#in-footer2-2::after{
	content: '';
	display: block;
	padding-top: 34.4%;
}
#ft-menu{
	position: absolute;
	width: 71.9%;/* 1150px */
	height: 14.5%;/* 80px */
	margin: auto;
	top: 3.6%;/* 20px */
	left: 3.1%;/* 50px */
	list-style: none;
}
#ft-menu li{
	display: inline-block;
	color: #FFFFFF;
	font-family: "M PLUS 1p";
	font-size: clamp(0.688rem, 0.398rem + 0.6vw, 1rem);/* 16px */
	padding: 1.3% 1.1% 0;/* 20px 18px 0*/
	text-align: center;
	vertical-align: top;
}
#ft-menu li a{
	text-decoration: none;
	color: #FFFFFF;
}
#ft-logo{
	position: absolute;
	width: 24.5%;/* 393px */
	height: auto;
	top: 27%;/* 150px */
	left: 4.4%;/* 70px */
}
.ft-adress{
	position: absolute;
	font-size: clamp(0.938rem, 0.822rem + 0.24vw, 1.063rem);/* 17px */
	color: #FFFFFF;
	top: 49%;/* 270px */
	left: 4.4%;/* 70px */
}
#copy{
	position: absolute;
	width: 100%;
	bottom: 5px;/* 5px */
	font-size: 13px;/* 13px */
	color: #FFFFFF;
	text-align: center;
}
/*---------------*/
.side-menu{
	position: fixed;
	width: 3%;/* 50px */
	height: 29.4%;/* 470px */
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	list-style: none;
}
.side-menu li{
	width: 100%;/* 50px */
	height: auto;/* 170px */
	background: rgb(2,104,55);
	margin: 0;
}
.side-menu li img{
	width: 100%;
	height: auto;
}
/*--------------------------------------------*/
#header2{
	position: relative;
	height: auto;/* 300px */
}
#header2::after{
	content: '';
	display: block;
	padding-top: 23.7%;
}
.page-title{
	position: absolute;
	font-size: clamp(1.375rem, 1.143rem + 0.48vw, 1.625rem);/* 26px */
	font-weight: normal;
	color: #FFFFFF;
	top: 56%;/* 170px */
	left: 6.3%;/* 100px */
	width: 400px;/* 400px */
	height: 60px;/* 60px */
	margin: auto;
	padding: 6px 0;/* 6px 0 */
}