@charset "utf-8";

/*------------------------------------*
 *------------ヘッダー部分------------*
 *------------------------------------*/

/**************************************
 **********画像スライドショー**********
 **************************************/
#top_image{
	width : 100%;
	margin : 0 auto;
	position : relative;
}

#main_image{
	clear : both;
	width :100%;
	height : auto;
	margin : 0 auto;
	position : relative;
}

#main_image:before{
	padding-top : 31.117%;
	display : block;
	content : "";
}

#main_image img{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 97;
	opacity : 0.0;
	width : 100%;
	height : auto;
}
#main_image img.active{
	z-index : 99;
	opacity : 1.0;
}
#main_image img.last-active{
	z-index : 98;
}

#top_image img{
	width : 100%;
	height : auto;
	position :absolute;
	top : 0px;
	left : 0;
	z-index : 100;
}

#top_image2{
	display:none;
}

@media screen and (max-width : 640px) {
	/*#top_image{
		display:none;
	}*/
	#top_image{
		display:block;
		width : 100%;
		height:250px;
		margin : 0 auto;
		position : relative;
	}
	
	#top_image img{
		width : 100%;
		height : 100%;
		position :absolute;
		top : 0;
		left : 0;
		z-index : 100;
	}
	#main_image{
		width: 100%;
		height:250px;
	}
}

@media screen and (max-width : 400px) {
	#top_image{
		display:none;
	}
	
	#top_image2{
		display:block;
		width : 100%;
		height:250px;
		margin : 0 auto;
		position : relative;
	}
	#top_image2 img{
		width : 100%;
		height : 100%;
		position :absolute;
		top : 0;
		left : 0;
		z-index : 100;
	}
	
	#top_image2 img.font{
		width : 100%;
		height : 50%;
		position :absolute;
		top : 25%;
		left : 0;
		z-index : 100;
	}
} 

/**************************************
 ******画像スライドショーここまで******
 **************************************/

/*------------------------------------*
 *----------ヘッダー部分終了----------*
 *------------------------------------*/



/*------------------------------------*
 *-------------メイン部分-------------*
 *------------------------------------*/
 
/**************************************
 **********事業内容コンテンツ**********
 **************************************/
#top #content{
	max-width : 1060px;
	width : 100%;
	height : auto;
	margin : 30px auto 60px auto;
	float: none;
}

#top .content_font{
	font-size : 14px;
	color : #000;
	padding-top : 10%;
}

#top  #content .content_font  h2{ /*  .content_font span */
	font-size : 21px;
	font-weight : bold;
	display : block;
	margin : 0 0 3.335% 0;
	border: none;
	padding: 0;
	text-align: center;
	box-sizing:content-box;
}

.absolute{
	position : absolute;
	top : 5px;
	left : 5px;
	right : 5px;
	bottom : 5px;
	color : #fff;
	font-size : 20px;
	font-weight : bold;
	visibility : hidden;
}

a:hover .absolute{
	visibility : visible;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
}

#content_left{
	width : 300px;
	height : 390px;
	display : inline-block;
	float : left;
	margin : 0 0 60px 40px;
	text-align : center;
}

#content_left a{
	display : block;
	text-decoration : none;
}

#content_left a div{
	max-width : 300px;
	min-width : 84.9px;
	width : 100%;
	position : relative;
}

#content_left a div img{
	max-width : 300px;
	min-width : 84.9px;
	width : 100%;
	border : 5px solid #59b3c3;
	display : block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#content_left a div .absolute{
	padding : 59px 0; /*  77px 0 */
}

#content_left a:hover{
	padding : 10px;
	margin : -11px;
	background-color : #f4f4f4;
	border : 1px solid #c1c6ca;
}

#content_left a:hover div img{
	border : 5px solid #29bdd7;
}

#content_left a:hover div .absolute{
	background-color : rgba(43,148,165,0.5);
}

#content_left a:hover div p span{
	color : #29bdd7;
}

#content_fontleft{
	padding-bottom : 43px;
}

#content_center{
	width : 300px;
	height : 390px;
	display : inline-block;
	float : left;
	margin : 0 0 60px 40px;
	text-align : center;
}

#content_center a{
	display : block;
	text-decoration : none;
}

#content_center a div{
	max-width : 300px;
	min-width : 84.9px;
	width : 100%;
	position : relative;
}

#content_center a div img{
	max-width : 300px;
	min-width : 84.9px;
	width : 100%;
	border : 5px solid #9acb3d;
	display : block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#content_center a div .absolute{
	padding : 59px 0; /*  77px 0 */
}

#content_center a:hover{
	padding : 10px;
	margin : -11px;
	background-color : #f4f4f4;
	border : 1px solid #c1c6ca;
}

#content_center a:hover div img{
	border : 5px solid #8cc423;
}

#content_center a:hover div .absolute{
	background-color : rgba(164,205,68,0.5);
}

#content_center a:hover div p span{
	color : #9acb3d;
} 

#content_fontcenter{
	padding-bottom : 18px;
}

#content_right{
	width : 300px;
	height : 390px;
	display : inline-block;
	margin : 0 40px;
	text-align : center;
}

#content_right a{
	display : block;
	text-decoration : none;
}

#content_right a div{
	max-width : 300px;
	min-width : 84.9px;
	width : 100%;
	position : relative;
}

#content_right a div img{
	max-width : 300px;
	min-width : 84.9px;
	width : 100%;
	border : 5px solid #2a9446;
	display : block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#content_right a div .absolute{
	padding : 59px 0;
}

#content_right a:hover{
	padding : 10px;
	margin : -11px;
	background-color : #f4f4f4;
	border : 1px solid #c1c6ca;
}

#content_right a:hover div img{
	border : 5px solid #16b258;
}

#content_right a:hover div .absolute{
	background-color : rgba(80,197,127,0.5);
}

#content_right a:hover div p span{
	color : #2a9446;
} 

#content_fontright{
	padding-bottom : 18px;
}

/**************************************
 ******事業内容コンテンツここまで******
 **************************************/

/**************************************
 **************トピックス**************
 **************************************/
#topics{
	max-width : 1060px;
	width : 100%;
	margin : 0 auto 30px auto;
}

#topics h1{
	text-indent: -9999px;
	margin-bottom: -30px;
}

#topics:after{
	display : block;
	clear : both;
	content : "";
}

#facebook{
	max-width : 500px;
	float : left;
}

#topics #facebook h2.headline, #topics #wordpress h2.headline{ /* topics内のpとheadlineを区別するために変更 #topics p */
	max-width : 500px;
	min-width : 138px;
	/*width : 17.925%;190px*/
	height : 35px; /* 70px→35px */
	line-height: 35px; /* 70px→35px */
	padding-top : 15px; /* 30px→15px */
	padding-bottom : 15px; /* 30px→15px */
	color : #fff;
	background-color : #1884c6;
	box-shadow : 15px 15px 0 rgb(222,222,222);
	/* margin-left : auto; 8.963% 95px*/
	font-size : 150%;
	margin : 10px auto 30px;
	text-align : center;
	width:100%;
	font-weight: normal;
}

.topics_feed{
	/*max-width : 740px;*/
	max-width : 500px;
	min-width : 479px;
	/*width : 70%;*//*調整の為コメントアウト*/
	overflow : hidden;
	/*padding : 0 40px;*//*調整の為コメントアウト*/
	text-align : center;
	margin-left : auto;
	margin-right:auto;
	box-sizing : border-box;
}

#feed{
	width : 100%;
	list-style-type : none;
	line-height : 90%;
	text-indent : 1em;
	font-size : 95%;
  	text-align : left;
}

#feed2{
	width : 100%;
	list-style-type : none;
	line-height : 90%;
	text-indent : 1em;
	font-size : 95%;
  	text-align : left;
}

#feed li{ /*  .topics_feed #feed li から変更 */
	line-height : 50px;
	height: 50px;
	overflow : hidden;
	white-space : nowrap;
  	-webkit-text-overflow: ellipsis; /* Safari */
  	-o-text-overflow: ellipsis; /* Opera */
  	text-overflow: ellipsis;
  	direction : ltr;
  	border-bottom : 1px dotted #ccc;
	/* padding-bottom: 10px; */
}

#more{
	width : 100%;
	margin : 20px auto 0 auto;
	background-color : #dedede;
	line-height : 30px;
	text-align : center;
}

#more a{
		color : #1884c6;
		display : block;
}

#wordpress{
	max-width : 500px;
	float : right;
}

#wordpress p{
	/* line-height : 70px; wordpressを5つ表示の為に調整 */
	line-height: 50px;
	height: 50px;
}
/**************************************
 **********トピックスここまで**********
 **************************************/

/**************************************
 **********外部リンク用バナー**********
 **************************************
 *		 display対応バージョン		  *
 *-webkit-box  PC-Chrome	  4～20   *
 *             PC-Safari	  3.1～6.0*
 *             Android標準	  2.1～4.3*
 *             iOS-Safari	  3.2～6.1*
 *             						  *
 *-webkit-flex PC-Chrome	  21～28  *
 *             PC-Safari	  6.1以降 *
 *             iOS-Safari	  7.0     *
 *             						  *
 *-moz-box     PC-Firefox	  2～21   *
 *									  *
 *-ms-flexbox  PC-IE		  10	  *
 *									  *
 *flex         PC-Chrome	  28以降  *
 *             PC-Firefox	  22以降  *
 *             PC-IE		  11	  *
 *             Android-標準	  4.4	  *
 *             Android-Chrome 35	  *
 **************************************
 **************************************/
#banner{
	max-width : 1060px;
	margin : 0 auto 50px auto;
	display : -webkit-box;
	display : -webkit-flex;
	display : -moz-box;
	display : -ms-flexbox;
	display : flex;
	list-style : none;
	-webkit-box-pack : justify;
	-moz-box-pack : justify;
	-ms-box-pack : justify;
	justify-content : space-between;
	-webkit-flex-flow : row wrap;
	-moz-flex-flow :row wrap;
	-ms-flex-flow :row wrap;
	flex-flow :row wrap;
}

#banner li{
	width : 236px;
	height : 62px;
	margin-bottom : 20px;
	text-align : center;
}

#banner li a{
	display : block;
	height : 60px;
}

#banner li a img{
	margin-top : 1px;
}

#banner li a:hover img{
	border : 1px solid #288BF5;
	margin-top : 0;
}

/**************************************
 ******外部リンク用バナーここまで******
 **************************************/

/*------------------------------------*
 *-----------メイン部分終了-----------*
 *------------------------------------*/


@media screen and (max-width: 1076px) {
	#facebook{
		float : none;
		margin : 0 auto 30px auto;
	}
	
	#wordpress{
		float : none;
		margin : 0 auto;
	}
}

@media screen and (max-width: 724px) {
	#banner{
		-webkit-box-pack : center;
		-moz-box-pack : center;
		-ms-box-pack : center;
		justify-content : space-around;
	}
}

@media screen and (max-width: 694px) {
	#topics{
		max-width : 694px;
		min-width : 320px;
		width : 100%; /* 85% */
		height : auto;
		margin : 0 auto 25px auto;
	}
	
	#topics  #facebook h2.headline, #topics #wordpress h2.headline{ /* headlineとリスト項目の差別化の為、#topics p　より変更 */
		max-width : 694px;
		width : 90%;
		float : none;
		margin : 0 auto 30px; /* 0 0 30px 0 */
		padding : 2px 0;
	}
	
	.topics_feed{
		max-width : 694px;
		min-width : 320px;
		width : 90%;
		padding : 0;
		float : none;
	}
	
	#feed{
		max-width : 694px;
		min-width : 320px;
		width : 90%;
		padding : 0;
		float : none;
  		text-align : left;
	}
	
	#feed2{
		max-width : 694px;
		min-width : 320px;
		width : 90%;
		padding : 0;
		float : none;
  		text-align : left;
	}

}

@media screen and (max-width: 600px) {
	#banner{
		display : block;
		width : 236px;
	}
}

@media screen and (max-width: 380px) {
	#top #content{
		max-width : 300px;
	}
	
	#content_left,
	#content_center,
	#content_right{
		margin : 0 auto 60px auto;
	}
}

/*********************************************/
/*****************SNSボタン*******************/
/*********************************************/
#boxArea{
	margin: 10px auto; 
	width:1060px; 
	height:20px;
	display: -webkit-box; /* safari対応 */
	display:flex;
	-webkit-box-pack: end; /* safari対応 */
	justify-content: flex-end;
	margin-bottom: 25px;
}

#boxArea div{
	height: 22px;
}


@media screen and (max-width: 724px) {
	#boxArea{
		width: 100%;
		max-width : 724px;
		display: block;
		margin-bottom:85px;
	}
	#boxArea div{
		margin-bottom: 10px;
		margin-left: auto;
		margin-right:auto;
	}
	#boxArea iframe{
		width: 100%;
	}
}


/********************************************/
/***************新年のあいさつ************:**/
/********************************************/

#top section #newyear{
	width: 980px;
	margin: 25px auto;
	box-shadow: 1px 1px 1px #cccccc;
	position: relative;
}

#top section #newyear h1{
	border-left:5px solid #bce124;
	padding:0 20px;
	margin:10px 0;
	font-size: 180%;
	font-weight: 500;
	/*font-weight: 300;*/
	box-sizing : border-box;
	text-align : left;
	/*font-family : "Noto Sans Japanese","メイリオ","Meiryo";*/
}

#top section #newyear p{
	padding: 10px 30px 45px;
	font-size: 95%;
}

#top section #newyear br{
	display:block;
	line-height: 35px;
}

#top section #newyear  .clearboth{
	/*text-align: right;*/
	position:absolute;
	right: 0;
	bottom: 0;
}

#top section #newyear  .clearboth a{
	color: white;
	display: block;
	background-color: #1884c6;
	padding: 5px 20px;
	margin: 0 2px 2px 0;
	font-family: "Noto Sans Japanese", cursive;
}

#top section #newyear .clearboth a:hover{
	opacity: 0.5;
	text-decoration: none;
}

@media screen and (max-width: 724px) {
	#top section #newyear{
		max-width: 570px
	}
}

@media screen and (max-width: 400px) {
	#top section #newyear{
		max-width: 300px
	}
}