@charset "utf-8";
/************
トップページCSS
************/
/*
	http://meyerweb.com/eric/tools/css/reset/
   v2.0
   リセット css
*/
/* 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%;
	font: inherit;
	vertical-align: baseline;
} */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* -------------------------------------------------------------- */

body{
	color:#000;
	/*font-family: "游明朝", serif,YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Sans-Serif;*/
	font-family: YuGothic,'Yu Gothic',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	font-size: 15px;
	line-height:1.5;
	background:#ffffff;
	margin:0;
	-webkit-text-size-adjust:100%;
	-webkit-print-color-adjust: exact;
}

/* リンク設定
------------------------------------------------------------*/
a{color:#21468C;text-decoration:none;}
a:hover{color:#0033ff;}
a:active, a:focus{outline:0;}

/* 全体
------------------------------------------------------------*/
body{
	width:98%;
	max-width: 1500px;
	margin: auto;
	height: auto;
	position:relative;
}

.inner{
	margin:0 auto;
	width:1000px;
	max-width: 100%;
}
/* ページトップ
------------------------------------------------------------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #fff;
  opacity: 0.8;
  border-radius: 50%;
  border: solid 1px #339900;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #339900;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/** ボトムナビゲーション
------------------------------------------------------------*/
#bottom-navi{
  width: 100%;
  height: 55px;
  position: fixed;
	bottom: 0;
	z-index: 500;
	margin: 0;
	padding: 0;
	font-size: 15px;
	background: #FFBF00;
}
#bottom-navi ul{
	padding: 0;
	margin: 0;
}
#bottom-navi ul li{
	text-align: center;
	width:49%;
	display: inline-block;
	padding: 16px 0;
	margin: 0px;
	opacity: 0.9;
}
#bottom-navi ul li a{
	color: #fff;
}
.nav-left{
	background: #ff70a3;
	height: 100%;
}
.nav-right{
	background: #FFBF00;
}
/*************
/* ヘッダー
------------------------------------------------------------*/
#header{
	width: 100%;
	max-width: 1500px;
	margin: auto;
}

#header:after{
	content:"";
	display: block;
	clear:both;
	visibility:hidden;
}
#header-top {
  margin: 0px;
  padding: 0px;
  height: 45px;
}
#header-top h1 {
  font-size: 13px;
  margin: 0px;
  line-height: 45px;
  padding: 0px;
  font-weight: normal;
  text-align: left;
}
/*************
/* ロゴ
------------------------------------------------------------*/
#logo{
	float:left;
	background:linear-gradient( to top,#339900,#A4CB67);
	width: 310px;
	height: 120px;
	font-size:13px;
}
#logo a{
	color:#fff;
	line-height:1;
}
#office{
	padding: 20px 30px;
	line-height:1.5;
}
#office p{
	width: 300px;
	text-align: justify; /* 両端揃え */
	text-justify: inter-ideograph; /* 両端揃えの種類 */
}
#office-nm{
	font-size: 25px;
	letter-spacing: 0.5em;
	font-weight:bold;
}
#office-sub{
	letter-spacing: 0.25em
}
/*************
/* ロゴ右部分
------------------------------------------------------------*/
#header-info{
	float: right;
	width: auto;
	height: 120px;
	padding-right: 80px;
	z-index: 500;
	background: #fff;
}
/*************
/* 問い合わせ
------------------------------------------------------------*/
#header-contact{
	float:right;
	width: 350px;
	height: 30px;
	letter-spacing: 0.1em
}
.contact-info{
	padding-top: 5px;
	float:left;
}
.contact-tel{
	font-size: 25px;
	color: #339900;
	letter-spacing: 0.07em
}
.contact-time{
	font-size: 11px;
}
.contact-btn{
	float:right;
	padding: 15px;
	font-size:12px;
	background:#339900;
	font-weight: bold;
	width: 110px;
	height: 20px;
	text-align: center;
}
.contact-btn a{
	color:#fff;
}
.contact-btn a:hover{
	color: #e9eee7;
	font-size:13px;
}
/**************************
/* メイン画像（スライドショー）
------------------------------------------------------------*/
#slideshow {
	position: relative;
	width:100%;
	height: calc(100vw/2.4);
	max-height: 650px;
	list-style-type: none;
}
#slideshow img {
	position: absolute;
	top: 0;
	left:0;
	z-index: 8;
	width:100%;
	opacity: 0.0;
	display: block;
}
#slideshow img.active {
 z-index: 10;
 opacity: 1.0;
}
#slideshow img.last-active {
 z-index: 9;
}

/**************************
/* ステップワンについて
------------------------------------------------------------*/
#about{
	margin:0 auto;
	padding:30px 0;
	width:100%;
	height: 350px;
	background: linear-gradient(to left,#e9eee7 60%, #fff 40%);
}
#about .inner{
	z-index:300;
}
/* 左部分 */
#about .about-left{
	float: left;
	width: 330px;
}
.about-top {
  clear: both;
	font-size: 22px;
  padding: 2px 0 5px 15px;
  margin: 10px 0 25px 30px;
	margin-block-end: 0;
  border-left: 2px solid #339900;
}
.about-btm {
  clear: both;
  padding: 5px 0 15px 15px;
  margin: 10px 0 25px 30px;
	margin-block-start: 0;
	font-size: 15px;
  border-left: 2px solid #ccc;
}
.about-pr{
	font-size: 27px;
	color: #339900;
	margin: 10px 0 25px 30px;
}
/* 右部分 */
#about .about-right{
	float: right;
	width: 580px;
}
#about .inner{position:relative;}
#about h2{
	font-size: 23px;
	padding: 10px;
	margin: 10px ;
	margin-bottom: 30px;
	border-bottom: solid 1px #ccc;
}
.text-imp{
  color: #c62f36;
  font-weight: bold;
}
/* 画像 */
#aboutImg img{
	width:100%;
	height:auto;
}

/**************************
/* グリッド(マンガで見る・テレワーク・SEO対策・自動見積もり)
------------------------------------------------------------*/
#workBox{
	order: 3;
}
#workBox ul {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  padding: 0;
  justify-content: center;
}
#workBox ul li {
  width: 100%;
  max-width: 230px;
	height: 120px;
	background: linear-gradient(#339900, #A4CB67);
	margin:2px;
	position: relative;
}
#workBox ul li i{
	border: 1.5px solid ;
	margin: 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
	padding: 5px;
}
#workBox li a div {
  color: #fff;
  font-size: 20px;
  text-align: center;
	white-space: nowrap;
}

/**************************
/* 最新情報
------------------------------------------------------------*/
#consul{
	width: 650px;
}
#consul h3{
	font-size: 23pt;
	text-align: center;
	color: #339900;
}
.under-line{
	padding-bottom: 15px;
	border-bottom: solid 3px #339900;
}
#consul p {
	text-align: left;
	line-height: 2em;
}
.consul-under {
	padding: 0 0 30px 0;
}
#consul .tel{
	width:70%;
	font-size: 24px;
	color: #21468C;
	text-align: right;
	float: left;
	padding-bottom: 20px;
}
#consul .time{
	width: 28%;
	font-size: 15px;
	float: right;
	text-align:left;
	line-height: 1.2em;
	padding-bottom: 20px;
}
.style1 {
	color: #0033FF;
	font-weight: bold;
}
.txt-center{
	text-align: center;
}
.estimate-btn{
	background:#339900;
	color: #fff;
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
	padding: .5em 1em;
	margin: 1em 0;
	border: 1px solid #339900;
}
.estimate-btn:hover{
	color: #339900;
	background-color: #fff;
	transition: 1.0s ;
}
.estimate-btn span{
	font-weight: normal;
	font-size: 10px;
	display: block;
	text-align: center;
	line-height: 1;
}
/*************
/* フッター
------------------------------------------------------------*/
#footer{
	clear:both;
	padding:20px 0;
	overflow:hidden;
	background:linear-gradient( to top,#339900,#A4CB67);
	color: #fff;
}
/* フッター内のグリッド(3カラム) */
#footer .grid{
	border:0;
	background:transparent;
}
#footer .grid p{padding:0;}
.footerLogo {
	color: #fff;
	font-size: 20px;
}
.footerContact{
	width: 230px;
	max-width: 230px;
	height: 50px;
	border: solid 1px #fff;
	position: relative;
	top: 30px;
	color: #fff;
}
.footerContact:hover{
	background: #339900;
}
.copyright{
	font-size:12px;
	background: #fff;
	text-align: center;
}
.v-align{
	position: absolute;          /* 位置指定 */
	top: 50%;                    /* 親要素の半分下にずらす */
	left: 50%;                   /* 親要素の半分右にずらす */
	transform: translateY(-50%) translateX(-50%);    /* 要素自体の半分、上と左にずらす */
}
/* PC用
------------------------------------------------------------*/
@media only screen and (min-width:1025px){
	.pc{
		display: block;
	}
	.sp{
		display: none;
	}
	/* ボトムナビゲーション
	----------------------------------*/
	#bottom-navi{
		display: none;
	}

	/* メニュー
	----------------------------------*/
	nav div.panel{display:block !important;}
	a#menu{display:none;}
	#topnav{
		float:left;
		margin-top:40px;
		display: flex;
	}
	#topnav li{
		float:left;
		margin:13px 5px 0;
		list-style: none;
		position:relative;
	}
	#topnav li a {
    line-height: 2rem;
	}
	#topnav a{
		color:#000;
		font-size:15px;
		display:block;
		padding:0 10px;
	}
	#topnav li.current-menu-item a,#topnav a:hover{
		background:#f5f5f5;
	}
	#topnav ul{
		width:180px;
		display:none;
	}
	#topnav li:hover ul{
		display:block;
		position:absolute;
		top:30px;
		left: -40px;
		z-index:500;
	}
	#topnav li li{
		margin:0;
		float:none;
		width:180px;
		text-align:left;
		background:#f4f4f4;
	}
	#topnav li li a{
		padding:15px;
		border:0;
	}
	#topnav li.current-menu-item li a,#topnav li li a{
		border-bottom-width:1px;
	}
	#topnav li li.current-menu-item a,#topnav li li a:hover{
		padding-bottom:10px;
		border-bottom-width:3px;
		background:#eee;
	}

	/* フッター
	----------------------------------*/
	#footer .grid{width:auto;}
	/* グリッド全体 */
	.gridWrapper{
		display:table;
		border-collapse:separate;
		border-spacing:5px;
		margin-left:20px;
		width:100%;
	}
	/* グリッド共通 ベース:トップページ3カラム */
	.grid{
		width:320px;
		display:table-cell;
	}

}
/* PC用(メニュー部分の切り替え.メニューをロゴの下へ)
------------------------------------------------------------*/
@media only screen and (max-width:1420px){
	#header{
		height: 220px;
	}
	#logo{
		position: relative;
		z-index: 21;
	}
	#header-info{
		position: relative;
    right: 0px;
    bottom: 100px;
		z-index: 20;
	}
	#topnav {
    margin-top: 70px;
	}
	@media only screen and (max-width:1100px){
		#topnav a{
			font-size:13px;
		}
	}
}

/* tablet,スマホ用
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.pc{
	display: none;
}
.sp{
	display: block;
}
body{
	width:100%;
}
#page_top{display: none;}
#header-top{display: none;}
#logo{
	background:#fff;
}
#logo a{
	color: #339900;
}
#header{
	height: 120px;
}
#header-info{
	top: 0;
	bottom: 0;
	padding-right: 0;
	height: 50px;
	position: fixed;
	right: 0;
	opacity: 0.9;
	z-index: 1000;
}
#header-contact{
	display: none;
}

/* メニュー
----------------------------------*/
nav#mainNav{
	clear:both;
	width:100%;
	margin:0;
	padding:0;
	background: #339900;
	border-radius: 3px;
	border: 1px solid #A4CB67;
}
nav#mainNav a.menu{
	width:100%;
	display:block;
	height:50px;
	line-height:50px;
	font-weight: bold;
	text-align:left;
	color:#fff;
}
nav#mainNav a#menu span{padding:10px;margin: 0;}
nav#mainNav a span:before{content:"≡ ";font-size: 50px;}
nav#mainNav a.menuOpen span:before{content:"× ";}
nav#mainNav a#menu:hover{cursor:pointer; }
nav .panel{
	display:none;
	width:80%;
	position: fixed;
	height: 100%;
	right:0;
	z-index:1;
}
nav#mainNav ul{
	margin:0;padding:0;
	/** メニューのスクロール */
	height: 80%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
nav#mainNav ul li{
	float:none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
}
nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #e8e8e8;
	color:#fff;
	background:#339900;
}
nav#mainNav ul li.current-menu-item a,nav#mainNav ul li a:hover,nav#mainNav ul li.current-menu-item a,nav#mainNav ul li a:active, nav#mainNav ul li li.current-menu-item a, nav#mainNav ul li.current-menu-item li a:hover, nav#mainNav ul li.current-menu-item li a:active{
	background:#A4CB67;
}
nav div.panel{float:none;}
nav#mainNav ul li li{
	float:left;
	border:0;
	background:#339900;
}
nav#mainNav ul li li a, nav#mainNav ul li.current-menu-item li a, nav#mainNav ul li li.current-menu-item a{
	padding-left:40px;
}

/* スライドショー
----------------------------------*/
#slideshow {
	height: calc(100vw/1.79 );
}

.grid{
	float:left;
	width:48%;
	margin:10px 2% 10px 0;
}
/* フッター前電話番号＆時間
----------------------------------*/
#consul .tel{
	width:100%;
	text-align: center;
	float: none;
	padding-bottom: 0;
}
#consul .time{
	text-align: center;
	width:100%;
	float: none;
}
/* フッター
----------------------------------*/
.footerContact{
	display: none;
}
#footer .grid, #footer .grid p{
	float:none;
	width:100%;
	text-align:center;
	border:0;
}

#footer .grid:last-child{padding-top:0;}
/** ボトムナビゲーション分高さ */
.copyright{
	height: 75px;
}
}
/* スマホ用
------------------------------------------------------------*/
@media only screen and (max-width:940px){

	#about{
		margin:0 auto;
		padding:30px;
		width:100%;
		height: 100%;
		background: #f4f4f4;
	}
	#about .about-left{
		float: none;
	}
	#about .about-right{
		float: none;
		width: 90vw;
	}
	#aboutImg img{
		display: none;
	}
	#consul{
		width: 90vw;
	}
}

@media only screen and (max-width:500px){
	.about-pr{
		font-size: 25px;
		margin: 10px 0 25px 30px;
	}
	#workBox li a div {
	  font-size: 17px;
	}
	#workBox ul li {
    width: 170px;
		height: 100px;
	}
	#workBox2 ul li {
		width: 300px;
		height: 350px;
	}
	#workBox2 ul li img{
		float: none;
	}
}