@charset "utf-8";
/*************************ベース*************************/
body	{
	font-family			: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size			: 14px ;
	line-height			: 2 ;
	color				: #333;
}

/*************************ヘッダー*************************/
header{
	width				: 100%;
}

.head{
	width				: 1080px;
	height				: 20px;
	margin				: 0 auto;
	padding				: 2px 0 2px;

}

h1{
	font-weight			: 400;
	color				: #333;
	float				: left;
}

.head .tel{
	float				: right;
}

.head .tel svg{
	width				: 10px;
	height				: 10px;
	padding				: 5px;
	margin				: 0 5px 0 0;
	color				: #fff;
	background-color		: #333;
	border-radius			: 50%;
	-moz-border-radius		: 50%;
	-webkit-border-radius		: 50%;
}

.head .tel p{
	font-size			: 16px;
	line-height			: 20px;
	font-weight			: 600;
	float				: right;
}

.navi {
	width				: 100%;
	padding				: 15px 0;
	margin				: 0 auto;
	background-image		: linear-gradient(135deg, #fff 0% 38%, #333 38% 100%);
	display				: inline-block;
	vertical-align			: bottom;
}

.navi .area{
	width				: 1080px;
	margin				: 0 auto;
}

.navi .logo01{
	width				: 70px;
	height				: 36px;
	color				: #e45826;
	margin				: 0 5px 0 0;
	float				: left;
}

.navi .logo02{
	width				: 200px;
	height				: 36px;
	color				: #231815;
	float				: left;
}

.navi .box{
	float				: right;
	display				: -webkit-flex;
	display				: flex;
	flex-wrap			: wrap;
	-webkit-justify-content		: right;
	justify-content			: right;
}

.menu{
	width				: 120px;
	font-size			: 16px;
	font-weight			: 600;
	color				: #fff;
	text-align			: right;
	line-height			: 36px;
}

.menu a{
	display				: inline-block;
	position			: relative;
	color				: #fff;
 	text-decoration			: none;
}

.menu a:before{
	content				: "";
	position			: absolute;
	left				: 0;
	bottom				: -4px;
	height				: 2px;
	background			: rgba(122,201,67,1.0);
	transform			: scale(0, 1);
	transform-origin		: left;
	transition			: 0.4s;
}

.menu a:hover:before {
	transform			: scale(1);
}

/*************************メインビジュアル*************************/
.swiper-slide img{
	width				: 100%;
	height				: 600px;
	object-fit			: cover;
}

.main_area{
	width				: 100%;
	height				: 600px;
	position			: relative;
	object-fit			: cover;
}

.txt_box{
	width				: 100%;
	text-align			: center;
	z-index				: 20;
	position			: absolute;
	top				: 25%;


}

.txt_box p{
	text-align			: center;
	font-weight			: 600;
	font-size			: 36px;
	line-height			: 46px;
	margin-bottom			: 30px;
	color				: #fff;
	text-shadow			: 1px 1px 5px #333;
}
.txt_box p span{
	font-weight			: 500;
	font-size			: 20px;
}

.img01_a{
	width				: 100%;
	position			: absolute;
	bottom				: 0;
	z-index				: 10;
}

.img01_a img{
	width				: 100%;
}

.img01_b{
	width				: 100%;
}

.img01_b img{
	width				: 100%;
	height				: 100%;
}

.btn {
	width				: 160px;
	height				: 50px;
	text-align			: center;
	border				: 2px solid #7ac943;
	cursor				: pointer;
	position			: relative;
	box-sizing			: border-box;
	overflow			: hidden;
	margin				: 0 auto 40px;
	border-radius			: 5px;
}

.btn a {
	font-weight			: 400;
	color				: #fff;
	text-decoration			: none;
	line-height			: 50px;
	transition			: all .10s ease;
	z-index				: 2;
	position			: relative;
	border-radius			: 5px;
}

.effect {
	width				: 160px;
	height				: 50px;
	top				: -2px;
	left				: -160px;
	background			: #7ac943;
	position			: absolute;
	transition			: all .5s ease;
	z-index				: 1;
}

.btn:hover .effect {
	left				: 0;
}

.btn:hover a {
	color				: #fff;
}

/*************************コンテンツ共通*************************/

.wrap{
	width				: 900px;
	margin				: 0 auto;
}

.tit{
	width				: 100%;
	text-align			: center;
	color				: #1a1a1a;
	font-size			: 36px;
	font-weight			: 700;
	line-height			: 42px;
	margin				: 0 auto 50px;
	padding				: 50px 0 0;
}
.tit span{
	color				: #e45826;
	font-size			: 24px;
	font-weight			: 400;
}

.co_box{
	width				: 100%;
	margin				: 0 auto 150px;
	display				: inline-block;
}

.txt{
	width				: 100%;
	text-align			: center;
	font-size			: 16px;
	margin				: 0 auto 40px;
}

.mg10{
	margin				: 0 0 10px;
}

/*************************ABOUT US*************************/
.abo_txt{
	width				: 100%;
	text-align			: center;
	font-size			: 30px;
	margin				: 0 0 40px;
}

.abo_l{
	width				: 100%;
	margin				: 0 20px 0 0;
	font-size			: 16px;
	float				: left;
}

.abo_l p{
	width				: 100%;
	margin				: 20px 0 0;
	font-size			: 24px;
	text-align			: right;
}

.abo_l p span{
	font-size			: 16px;
}

.abo_r{
	width				: 360px;
	height				: 270px;
	float				: right;
	padding				: 0 0 0 20px;
}

.abo_r img{
	width				: 360px;
	height				: 270px;
	object-fit			: cover;
	border-radius			: 10px;
}

/*************************WORKS*************************/

/* アコーディオン */
.actab {
	color				: #fff;
	position			: relative;
	overflow			: hidden;
	width				: 100%;
	margin				: 0 auto 20px;
}

.actab input {
	position			: absolute;
	z-index				: -1;
	opacity				: 0;
}

.actab label {
	color				: #7ac943;
	font-size			: 30px;
	line-height			: 50px;
	position			: relative;
	display				: block;
	padding				: 0 0 0 20px;
	cursor				: pointer;
	margin				: 0 0 1px;
	background			: #333;
}

.actab label span{
	color				: #fff;
	font-size			: 24px;
	font-weight			: 600;
}

.actab label:after{/*チェックのアイコン（↓）*/
	font-family			: "Font Awesome 5 Free"; /*←ココ！！！！！！！*/
	font-weight			: 700;
	content				:"\f107";
	position			: absolute;
	right				: 30px;
	top				: 0;
}

.actab input:checked ~ label::after {/*チェックのアイコン（↑）*/
	font-family			: "Font Awesome 5 Free"; /*←ココ！！！！！！！*/
	font-weight			: 700;
	content				:"\f106";
}

.actab input:checked ~ .content {
	max-height			: 100em;
}

.actab .content {
	overflow			: hidden;
	max-height			: 0;
	-webkit-transition		: max-height 0.5s;
	transition			: max-height 0.5s;
	width				: 880px;
	padding				: 0 0 0 20px;
}

.actab .lbox {
	width				: 640px;
	float				: left;
	color				: #333;
	margin				: 20px 0 50px;
	font-size			: 16px;
	font-weight			: 400;
}

.biz_tit{
	color				: #333;
	font-size			: 20px;
	line-height			: 20px;
	font-weight			: 500;
	margin				: 0 auto 10px;
	padding				: 0 0 5px 10px ;
	border-left			: solid 20px #e45826 ;
	border-bottom			: solid 2px #e45826 ;
}

.actab .rbox svg, .actab .rbox img{
	width				: 210px;
	height				: 150px;
	color				: #ddd;
	object-fit			: cover;
	float				: right;
	margin				: 20px 0 0;
}

/*************************COMPANY*************************/
.com_line{
	display				: inline-block;
	margin				: 0 0 10px;
	border-bottom			: solid 1px #f1ab92;
	font-size			: 16px;
}

.com01{
	width				: 180px;
	padding				: 15px 0 15px 20px;
	margin				: 0 20px 0 0;
	background-color		: #f1ab92;
	float				: left;
}

.com02{
	width				: 680px;
	padding				: 15px 0;
	float				: left;
}

.map{
	height				: 300px;
}

/*************************CONTACT*************************/
.tel_box{
	width				: 400px;
	margin				: 0 auto 50px;
	padding				: 10px 30px;
	border				: solid 2px #7ac943;
	text-align			: center;
	border-radius			: 5px;
}

.tel_btn{
	width				: 270px;
	margin				: 0 auto;
	padding				: 0 0 0 50px;
	background-image		: url("../img/tel.svg");
	background-size			: 40px;
	background-repeat		: no-repeat;
	background-position		: center left;
	text-align			: center;
	font-size			: 40px;
	line-height			: 80px;
}

.mail {
	width				: 80px;
	height				: 80px;
	margin				: 0 auto 5px;
	color				: #333;
}

.mail svg{
	width				: 80px;
	height				: 80px;
}

.cont_line01{
	width				: 100%;
	display				: inline-block;
	margin				: 0;
}

.cont_l{
	width				: 150px;
	float				: left;
	font-size			: 16px;
}

.cont_r{
	float				: left;
	font-size			: 14px;
}

.cont_line02{
	width				: 100%;
	height				: 40px;
	margin				: 0 0 15px;
}

.cont_txt02{
	width				: 96%;
	padding				: 8px 2%;

}

.txtarea{
	width				: 96%;
	padding				: 10px 2%;
	height				: 200px;
	margin				: 0 0 40px;
}

.send{
	width				: 260px ;
	height				: 70px ;
	margin				: 30px auto 100px ;
	color				: #7ac943;
}

input[type=submit]{
	display				: block !important;
	background-color		: #7ac943;
	border				: none;
	width				: 256px ;
	height				: 66px ;
	cursor				: pointer;
	text-align			: center;
	font-size			: 20px;
	color				: #fff;
	border				: solid 2px #7ac943;
	border-radius			: 5px;
}

input[type=submit]:hover{
	background-color		: #fff;
	color				: #7ac943;
	border				: solid 2px #7ac943;
	transition			: all .5s ease;
}


/*************************サイドナビ*************************/

.side_sns{
	width				: 40px;
	padding				: 5px 0 0;
	position			: fixed;
	bottom				: 0;
	right				: 0;
	background-color		: #000;
	z-index				: 20;
}

.side_sns p{
	width				: 30px;
	height				: 30px;
	line-height			: 30px;
	font-size			: 14px;
	line-height			: 30px;
	font-weight			: 400;
	margin				: 0 0 5px;
	padding				: 0 5px;
	color				: #fff;
	text-align			: center;
}

.side_sns svg{
	width				: 30px;
	height				: 30px;
	margin				: 0 0 5px;
	padding				: 0 5px;
	color				: #fff;
}

.side_sns a:hover svg{
	color				: #7ac943;
	transition			: all .5s ease;
}

/*************************フッター*************************/
.footer{
	width				: 100%;
	padding				: 30px 0;
	background-color		: #e45826;
	color				: #fff;
	text-align			: center;
}

.footlogo01{
	width				: 70px;
	margin				: 0 auto 5px;
}

.footer .logo01{
	width				: 70px;
	height				: 36px;
}

.footlogo02{
	width				: 200px;
	margin				: 0 auto 20px;
}

.footer .logo02{
	width				: 200px;
	height				: 36px;
}

.footer .add{
	width				: 100%;
	font-size			: 16px;
	margin				: 0 0 15px;

}

.footer .tel{
	width				: 180px;
	margin				: 0 auto 30px;
}

.footer .tel svg{
	width				: 20px;
	height				: 20px;
	padding				: 5px;
	margin				: 0 5px 0 0;
	color				: #e45826;
	background-color		: #fff;
	border-radius			: 50%;
	-moz-border-radius		: 50%;
	-webkit-border-radius		: 50%;
	float				: left;
}

.footer .tel p{
	font-size			: 20px;
	line-height			: 25px;
	font-weight			: 600;
	float				: left;

}

.telno, .telno a{
	color				: #fff;
}


.copy{
	width				: 100%;
	line-height			: 30px;
	font-size			: 12px;
	color				: #000;
	text-align			: center;
}





@media screen and (max-width:899px) {
/*　画面サイズが899pxまではここを読み込む　*/

/*************************ヘッダー*************************/
.head{
	width				: 90%;
}

.head .tel{
	display				: none;
}

.navi {
	background-image		: linear-gradient(135deg, #fff 0% 80%, #333 80% 100%);
}

.navi .box{
	display				: none;
}



/*************************メインビジュアル*************************/
.btn {
	background			: #7ac943;
}

/*************************コンテンツ共通*************************/
.wrap{
	width				: 90%;
}

/*************************ABOUT US*************************/
.abo_l{
	width				: 100%;
	margin				: 0 auto 20px;
}

.abo_r{
	width				: 100%;
	height				: auto;
	padding				: 0 0 20px;
}

.abo_r img{
	width				: 100%;
	height				: auto;
}

/*************************WORKS*************************/

.actab .content {
	width				: 100%;
	padding				: 0;
}

.actab .lbox {
	width				: 100%;
	margin				: 20px 0;

}

.actab .rbox svg, .actab .rbox img{
	margin				: 0 0 50px;
}

/*************************COMPANY*************************/
.com_line{
	width				: 100%;
}

.com01{
	width				: 98%;
	padding				: 0 0 0 2%;
	margin				: 0 ;
}

.com02{
	width				: 98%;
	padding				: 0 0 0 2%;
}

.map{
	height				: 250px;
}

/*************************CONTACT*************************/

.tel_box{
	width				: 280px;
	padding				: 10px;
}

.tel_btn{
	width				: 200px;
	padding				: 0 0 0 50px;
	background-size			: 40px;
	font-size			: 30px;
	line-height			: 40px;
}


/*************************サイドナビ*************************/

.side_sns{
	width				: 100%;
}

.side_sns p{
	float				: right;
}

/*************************フッター*************************/
.copy{
	padding				: 0 0 50px;
}


}


@media screen and (min-width: 900px) {
/* 900pxからの幅の場合に適応される */
.sp_br{
	display				: none;
}

}