@charset "utf-8";
/* CSS Document */

body{
	font-family: Roboto, 游ゴシック Medium, 游ゴシック体, Yu Gothic Medium, YuGothic, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, ＭＳ\ Ｐゴシック, MS PGothic, sans-serif;
	color: #353535;
    font-size: 1.2rem;
    line-height: inherit
}

body a{
	color: #000000;
	text-decoration: none;
}

body a:hover{
	opacity: 0.7;
}

.main-wrap{
	max-width: 1100px;
	margin: 0 auto;
}

/*メニュー*/
header{
	display: flex;
	max-width: 1100px;
	margin: 0 auto;
	justify-content: space-between;
}


h1 img{
	width: 50%;
	padding: 1em 
}

.manu-li{
	
	display: flex;
	justify-content: space-around;
	padding: 1em 0;
}


.manu-li li{
	padding-right: 1.3em;
}

.manu-li li img:first-child{
	padding-right: 1.5em;
}



/*インフォ*/
.news-wrap{
	display: flex;
	border-top: 1px #80766A solid;
	border-bottom: 1px #80766A solid;
	margin-top: 3em;
}

.news-right{
	width: 82%;
}

.news-left{
	width: 18%;
	text-align: center;
	line-height:100px;
	
}


.news-right-box{
	display: flex;
	font-size: .9em;
	position: relative;
}

.news-item1,.news-item3{
	padding-top: 0.4em;
}
.news-item2 p{
	background: #222224;
	color: #fff;
	padding: 0.2em 0.3em;
	margin: 0.2em 1.5em;
	font-size: 0.8em;
}



.news-right-box{
	border-bottom: 1px solid #80766A;
	
}

.news-right-box:last-child{
	border-bottom: none;
}



.sankaku{
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left: 8px solid #222224;
	margin: 0 0 0 auto;
	vertical-align: middle;
	position: absolute;
	right: 0;
	top: 8px;
	
}


/*企業理念*/

.rinen{
	text-align: center;
	margin: 8em 0;
}

.rinen h3 img{
	width: 15%;
	margin-bottom: 2em;
}

.text-c{
	line-height: 2em
}


/*ネット事業部*/

.net{
	background: #F1F1F1;
	width: 100%;
	border-top:1px solid #80766A;
	border-bottom: 1px solid #80766A;
}

.net-wrap{
	max-width: 1100px;
	margin: 0 auto;
	
}

.net-ttl p{
	text-align: center;
}

.net-wrap h3 img{
	width: 30%;
	margin: 5em 0;
}


.text-c p{
	text-align: center;
	padding-bottom: 3em;
}


.net-flex{
	display: flex;
	padding-top: 5em;
	
}

.net-f-img p{
	text-align: center;
}

.net-flex div{
	width: 50%;
}

.net-f-txt{
	background: #fff;
	padding: 1em 2em;
	height: 550px;
}

.net-f-txt h4{
	font-size: 1.3em;
	margin-bottom: 1.2em;
}


.jisseki span{
	border-bottom: 1px solid #000000;
	padding-bottom: .3em;
}

.jisseki{
	text-align: right;
	margin: 5em 0 3em 0;
	padding-bottom: 3em;
}

.jisseki-box{
	position: relative;
}

.jisseki-yajirushi{
     display: block;
     width: 15px;
     height: 15px;
     border-top:  1px solid #000000;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
	position: absolute;
	top: 27px;
	right: 2px;
}


/*自社サイト運営*/
.shopping{
max-width: 1100px;
	margin: 0 auto;
}

.shopping h3 p{
	text-align: center;
}

.shopping h3 img{
	width: 40%;
	margin: 5em 0;
}

.shop-flex{
	display: flex;
	margin-bottom: 5em;
	flex-wrap: wrap;
	justify-content: space-around;
}

.shop-flex img{
	border: 1px solid #878787;
	width: 100%;
}

.shop-f-box{
	width: 30%;
}

.shop-f-box:nth-child(2) img{
	border: none;
	
}

.shop-f-box:last-child{
	margin-right: 0;
}


/*エリア事業部*/
.area{
	background: #F1F1F1;
	border-top:1px solid #80766A;
	
}

.area-wrap{
    max-width: 1100px;
	margin: 0 auto;
	
}


.area-wrap h3 p{
	text-align: center;
}


.area-wrap  h3 img{
	width: 30%;
	margin: 5em 0;
}

.area-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-bottom: 8em;
}

.area-item{
	width: 45%;
	padding-top:2em; 
}

.area-item img{
	width: 100%;
}

.area-item h4{
	font-size: 1.2em;
	border-bottom: 1px solid #B7B7B7;
	padding-top: 1em;
}


/*バナー*/

.under{
	max-width: 1100px;
	margin: 0 auto;
}

.banner{
	max-width: 1100px;
	display: flex;
	justify-content:space-around;	
	margin: 10em 0 8em 0;
}

.banner div img{
	width:  100%;
}

.banner div{
	width: 30%;
}


/*問い合わせ*/

.toiawase{
	display: flex;
	max-width: 1100px;
	margin-bottom: 4em;
}

.toiawase div{
	width: 50%;
}

.toiawase div img{
	width: 100%;
}



/*footer*/
footer{
	background: #EFEFEF;
}

footer ul{
	display: flex;
	justify-content: center;
	padding: 2em 0;
	border-bottom: 1px solid #B7B7B7;
}

footer ul li{
	padding:0 1em;
	border-right: 1px solid #000;
}



.footer-flex{
	display: flex;
	justify-content: center;
}

.footer-flex div{
	margin: 4em 2em;
}

.copy{
	background: #222224;
	color: #fff;
	text-align: center;
	padding: 1em 0;
}


/*pad・携帯用*/

/*携帯版のみ表示用*/
@media screen and (min-width: 950px) {
	.sp-item{
		display: none;
	}
}

/*メニューは949以下でハンバーガーにする*/

@media screen and (max-width: 949px) {
.pc-item{
	display: none;/*PC用非表示*/
}

	body p{
		font-size: 80%;
	}	
	
.sp-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  height: 60px;	
  padding: 0px;
  position: fixed;
 top: 0;
 left: 0;
  z-index: 2;
  background: #fff;
  overflow: hidden;	
}
.menu-trigger {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  
}
	
/*メニューの三本ライン*/	
.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
  transition: all .5s .2s;
}
.menu-trigger.active span {
  background-color: #000;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
}
	
/*開いたとき*/	
.sp-nav {
  width: 100%;
  background-color: rgba(255,255,255, 0.7);
  color: #fff;
  text-align: center;
  display: none;
  position: fixed;
  top: 1.6em;
  left: 0;
  z-index: 1;
}
.sp-nav ul {
  margin: 20px 0;
 display: flex;
flex-direction:column;
align-items: center;	
 justify-content: center;	
}
.sp-nav ul li {
  padding: 5px 0;
　color: #fff;	
  position: relative;
  width: 100%;
  height: 1.5em;
  margin: 0.5em auto;
vertical-align: middle;	
 	
}	

	.sp-nav ul li a{
   display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3em;
  padding-top: 0.8em;	
	}
	
.sp-nav ul li a:hover{
		color: #DD135F;
     background: #FF9FA0;
	}	
	
	
	#top-img{
		margin-top: 3em;
	}
	
	
	
/*インフォpad*/	
	.news-wrap{
		display: block;/*flexの取り消し*/
		
	}	
	
	.news-left{
	width: 100%;
	text-align: center;
	line-height:50px;
	background: #f1f1f1;
	border-bottom: 1px solid #80766A;
	
}
	
	.news-right{
	width: 100%;
	padding-left: .5em;
}


	
/*ネット事業部*/	

.net-flex{
	display: block;
	padding-top: 3em;
	margin: 0 auto;
	
}
	.net-f-img{
		width: 100%;
		margin: 0 auto;
	}
	
	.net-f-txt{
		margin: 0 auto;
	}

	.net-f-txt{
	background: #fff;
	padding: 2em 2em;
	margin-top: 1.5em;
	height: auto;
}

.net-f-txt h4{
	font-size: 1.1em;
	margin-bottom: 1.2em;
}
	
.jisseki-yajirushi{
	top: 21px;
	right: 2px;
}	
	
footer ul li{
		font-size: 80%;
	}	
	small{
		font-size: 80%;
	}	
	
}/*pad用ここまで*/


/*携帯用*/

@media screen and (max-width: 949px) {
	
	/*インフォ*/
	.news-right-box{
	 display: flex;	
	flex-wrap: wrap;
		position: relative;
		font-size: 80%;
	}

	
	.news-item3{
		padding-right:1em; 
	}
	
	.sankaku{
	display: none;
}

	/*企業理念*/
	.rinen h3 img{
		width: 38%;
	}
	
	.text-c{
		padding: 0.5em;
	}
	
	.text-c p{
		text-align: left;
		line-height: 1.5em;
		
	}	
	
	
	/*ネット事業部画像*/
	
	.net-wrap h3 img{
		width: 60%;
	}
	
	.net-flex div{
		width: 80%;
	}
	
	.net-f-img img{
		width: 100%;
	}	
	
	/*通販*/
	.shopping h3 img{
		width: 70%;
	}
	
	.shop-flex{
		display: block;
	}
	
.shop-f-box{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 3em;
}


.shop-f-box:last-child{
	margin-left: 0;
	margin: 0 auto;
}

/*エリア事業部*/
	.area-wrap h3 img{
		width: 60%;
		margin: 3em;
	}
	
	.area-flex{
		display: block;
	}
	
	.area-item{
	width: 80%;
	padding-top:3em; 
	margin: 0 auto;
}


.area-item h4{
	font-size: 1em;

}

	/*バナー*/
	.banner{
		display: block;
		margin: 2em 0;
	}
	.banner div {
		width: 80%;
		margin: 0 auto;
		padding-bottom: 1em;
	}
	
	.banner div img{
		width: 100%;
	}
	
/*フッター*/
	

footer ul{
	display:block;
	padding: 2em 0;
	border-bottom: 1px solid #B7B7B7;
}

footer ul li{
	padding:0 1em;;
	border-right: none;
	
}

/*問い合わせ*/

.toiawase{
	display: block;
}

.toiawase div{
	width: 80%;
	margin: 0 auto;
}

.footer-flex{
	display: block;
}

.footer-flex div{
	margin: 1em;
}
	
	small{
		font-size: 60%;
	}	
	
	
	
	
	
}/*携帯用ここまで*/
	
/*制作実績用*/

	  .sample-flex{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		 padding-top: 3em; 
	}
	.s-f-box{
		margin: 10px;
	}
	.s-f-box a:hover{
		opacity: 0.7;
	}
	  
	/*ホバー時のアニメーション*/
	  .s-f-box{
		  width: 200px;
		  height: 174px;
		  overflow: hidden;
		  margin:	10px 8px 10px 16px;
	      position:	relative;
	  }
 /*文字が一行の時*/
 .s-f-box .caption-1 {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		2.8em;
} 
	  
/*文字が二行の時*/	  
.s-f-box .caption-2 {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		2em;
}	
/*文字が三行の時*/	  
.s-f-box .caption-3 {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		1.2em;
}		  
	  
.s-f-box .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transform:	rotateX(-180deg);
	transform:		rotateX(-180deg);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.s-f-box:hover .mask {
	-webkit-transform:	rotateX(0deg);
	transform:		rotateX(0deg);
	opacity:		1;	/* ホバーで表示する */
}
	  
/*タイトル用*/	 
	  
.key-visual {
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;

}
/*@media only screen and (max-width:850px) {
	/*850以下*/
	/*.key-visual {
		top	:4em;
		height:20em; 

	}
}*/
.key-visual .key-visual_img {
	position: relative;
	overflow: hidden;
	background: #eaeaea;

}
.key-visual .key-visual_img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	font-family: "object-fit:cover;";
}


@media only screen and (max-width:959px) {
	.key-visual .key-visual_img img {
		display: none;
		height: 12rem
	}
}

	
/*文字部分*/
.key-visual .key-visual_ttl {
	font-family: Noto Serif JP, 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ\ Ｐ明朝, ＭＳ\ 明朝, serif!important;
	font-size: 2rem;
	font-weight: 700;
	margin-top: 2em;

}
@media only screen and (max-width:768px) {
	.key-visual .key-visual_ttl {
		font-size: 2rem
	}
}
.key-visual .key-visual_ttl span {
	font-size: 2.2rem;
	display: block
}
@media only screen and (max-width:768px) {
	.key-visual .key-visual_ttl span {
		font-size: 1.6rem
	}
}
.key-visual-gray {
	height: 24rem;
	background-image: -webkit-linear-gradient(69deg, #dcdcdc 16%, #f1f1f1 84%);
	background-image: -o-linear-gradient(69deg, #dcdcdc 16%, #f1f1f1 84%);
	background-image: linear-gradient(21deg, #dcdcdc 16%, #f1f1f1 84%)
}
@media only screen and (max-width:768px) {
	.key-visual-gray {
		height: 14rem
	}
}


/*緑花堂の文字リンク*/

.ryoccado-a a{
	  position: relative;
  display: inline-block;
  text-decoration: none;
margin-bottom: 0.5em;	
}

.ryoccado-a a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #008022;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.ryoccado-a a:hover::after {
  transform: scale(1, 1);
}

/*top以外のフッターとの距離*/
.page-wrap{
	margin-bottom:4em; 
}


/*会社概要のテーブル*/
.corpo table{
	width: 800px;
	margin: 0 auto;
	
}

.corpo table th{
	width: 15%;
	border-bottom: solid 2px;
  padding: 10px 0;
}

.corpo table td{
	  border-bottom: solid 2px #ddd;
  padding: 1em 0 1em 2em;
}
.corpo table td a{
	text-decoration: underline;
}




/*会社概要レスポンシブテーブル用*/
.corpo table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
　border: solid 1px #ccc;
  padding: 10px;
}
 
.br-pc-none{
	display: none;
}

@media screen and (max-width: 768px) {
	.corpo table{
		width: 90%;
		margin: 0 auto;
	}
	
	
.br-pc-none{
	display: block;
}	
.corpo table th{
	width: 100%;
	border-bottom: solid 2px;
  padding: 10px 0;
}
	.corpo table td{
		width: 100%;
		padding: 1em 0;
	}	
	
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
	padding: 0;
  }
}




/*採用情報*/

.shinsotu{
	margin: 2em 0;
	
}

.recruit{
	max-width: 800px;
	margin: 0 auto;
}
.recruit table{
	width: 100%;
	 border-spacing: 0;
}


.recruit table th{
	  border-bottom: solid 2px #fb5144;
  padding: 10px .5em;
	width: 20%;
}


.recruit table td{
  border-bottom: solid 2px #ddd;
  text-align: left;
  padding: 1em 0 1em 2em;
}



.recruit-2{
	max-width: 800px;
	margin: 0 auto;
	margin-top: 2em;
}

.recruit-2 table{
	margin-top: .3em;
}

.recruit-2 table th{
	width: 20%;
}

.recruit-2 table{
	 border-spacing: 0;
}


.recruit-2 table th{
	  border-bottom: solid 2px #EF8600;
  padding: 10px .5em;;
}


.recruit-2 table td{
  border-bottom: solid 2px #ddd;
  text-align: left;
  padding: 1em 0 1em 2em;
}

.recruit-2 a{
	text-decoration: underline;
}

/*レスポンシブテーブル用*/


.tbl-r04 th {
  padding: 10px;
}
.tbl-r04 td {
　border: solid 1px #ccc;
  padding: 10px;
}
 
@media screen and (max-width: 640px) {
  .last-re-2 td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r04 {
    width: 100%;
  }
  .tbl-r04 th,
  .tbl-r04 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
	.recruit-2 table td{
		padding: 0;
	}
	
	.recruit table td{
		padding: 0;
		margin: 0 ;
	}
	
}


.tbl-r03 th {
  padding: 10px;
}
.tbl-r03 td {
　border: solid 1px #ccc;
  padding: 10px;
}
 
@media screen and (max-width: 640px) {
  .last-re td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r03 {
    width: 80%;
  }
  .tbl-r03 th,
  .tbl-r03 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }

	
}



/*文字装飾*/
.recruit h4,.recruit-2 h4{
  font-weight: bold;
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #C3D7EE;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

.recruit h4:before,.recruit-2 h4:before{
	  content: '●';
  color: white;
  margin-right: 8px;
	
}

/*サイトポリシー*/

#policy{
	width: 800px;
	margin:  0 auto;
	margin-top: 3em;
}

#policy h3{
	font-weight: bold
}

@media only screen and (max-width:768px) {
	#policy{
	width: 90%;
}
}

/*お知らせ詳細ページ*/

.news-page{
	width: 90%;
	margin: 0 auto;
	padding: 3em 0;
}

.news-ttl span{
 background: #3E3E3E;
 color: #fff;
padding: 0 .5em;
margin: 1em;	
}

.news-ttl h2{
	font-size: 1.2em
}

.news-p{
	margin: 3em 0;
}

/*遠隔操作用ファイル*/

.enkaku a p{
	text-align: center;
	 color: #fff;/* 文字色 */
}


.enkaku a:hover{
	text-decoration: underline;
	color: #fff;
	opacity: 0.6;
}



.enkaku  {
 position: relative;
 width: 40%;
 margin: 2.5em auto;
 padding: 30px 30px 20px;
 color: #fff;/* 文字色 */
 background-color: #008080; /*枠背景色*/
 box-shadow: inset 0 0 40px rgba(0, 128, 150,10), 0 2px 2px #ccc;
 z-index: 1;	
}
.enkaku ::before {
 display: block;
 position: absolute;
 content: "";
 width: 140px;
 height: 35px;
 left: 35%;
 top: -16px;
 background-color: rgba(232, 255, 255,0.3);/*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate( -3deg ); /*テープ角度*/
}