@charset "UTF-8";
/****************************************
       CSS レイアウト (共有)
*****************************************/

/*メインイメージアニメーション*/


.main_img_contents{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
}

.img_bg{
background: url(../images/top_img.jpg) top center no-repeat;
background-size: 100% auto;
padding-top : 66.666%
}

#main_img{
display: block;
background:transparent;
margin: 0px auto;
width:100%;
max-width:1200px;
margin-bottom:64px;
animation: MainImageIn 1.8s/*アニメーション*/
}

@keyframes MainImageIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateY(64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}



/*about_us*/
#about_us{
display: block;
background:transparent;
margin: 0px auto;
width:100%;
max-width:1200px;
animation: MainImageIn 1.8s/*アニメーション*/

}

#about_us ul li {
width: 50%;
min-height: 500px;
float: left;
}

.about_us_img{
background:#f2f2f2;
}

/*画像*/
.about_us_logo{
display:block;
width:100%;
height:auto;
}


#about_us h2{
margin-bottom: 30px;
color: #539901;
font-family: 'Open Sans', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: 0.1em;
position: relative;
text-shadow: 2px 2px 4px #696;
}

#about_us h2:first-letter{
color: #f8fff8;
background-color: transparent;
font-size: 48px;
}

#about_us .lead{
font-size: 13px;
word-break: normal;
word-wrap: break-word;
color: #333333;
line-height: 1.75;
letter-spacing: 1.5px;
}

#about_us .textset{
margin-top:100px;
margin-left: -10%;
width: 110%;
height: 300px;
display: block;
position: relative;
background:transparent;
padding:20px;
}

#about_us::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}



/*company*/
.company_info{
	margin-top:32px;
	position: relative;
}

.company_info_block{
display:block;
position: absolute;
bottom:2px;
left:calc(5% + 2px);
background:rgb(253, 253, 255,0.8);
width:50%;
height:300px;
margin-bottom:80px;
border-radius: 0.5em; 
box-shadow:
-5px 5px 15px rgba(66, 151, 255, 0.1),
 5px -5px 15px rgba(8, 131, 161, 0.1);
}

.company_info_block_inner{
	padding:20px;
}

.company_info_block_inner p{
	display:block;
	font-size: 1.1em;
	line-height:1.774;
	word-break: normal;
	word-wrap: break-word;
}

.company_info_block h2{
margin-bottom: 30px;
color: #388fe1;
font-family: 'Open Sans', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: 0.1em;
position: relative;
text-shadow: 2px 2px 4px #1c4f7e;
}

.company_info_block h2:first-letter{
color: #f8fff8;
background-color: transparent;
font-size: 48px;
}


/*business*/
.business_info{
	margin-top:32px;
	position: relative;
}

.business_info_block{
display:block;
position: absolute;
bottom:2px;
left:calc(45% + 2px);
background:rgb(255, 253, 245,0.8);
width:50%;
height:300px;
margin-bottom:80px;
border-radius: 0.5em; 
box-shadow:
-5px 5px 15px rgba(255, 226, 66, 0.1),
 5px -5px 15px rgba(161, 127, 8, 0.1);
}

.business_info_block_inner{
	padding:20px;
}

.business_info_block_inner p{
	display:block;
	font-size: 1.1em;
	line-height:1.774;
	word-break: normal;
	word-wrap: break-word;
}


.business_info_block h2{
margin-bottom: 30px;
color: #e1bf38;
font-family: 'Open Sans', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: 0.1em;
position: relative;
text-shadow: 2px 2px 4px #7e6d1c;
}

.business_info_block h2:first-letter{
color: #f8fff8;
background-color: transparent;
font-size: 48px;
}







/*recruit*/
.recruit_info{
	margin-top:32px;
	position: relative;
}

.recruit_info_block{
display:block;
position: absolute;
bottom:2px;
left:calc(5% + 2px);
background:rgb(255, 247, 249,0.8);
width:50%;
height:300px;
margin-bottom:80px;
border-radius: 0.5em; 
box-shadow:
-5px 5px 15px rgba(255, 66, 106, 0.1),
 5px -5px 15px rgba(161, 8, 51, 0.1);
}

.recruit_info_block_inner{
	padding:20px;
}

.recruit_info_block_inner p{
display:block;
font-size: 1.1em;
line-height:1.774;
word-break: normal;
word-wrap: break-word;
}

.recruit_info_block h2{
margin-bottom: 30px;
color: #e1386c;
font-family: 'Open Sans', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: 0.1em;
position: relative;
text-shadow: 2px 2px 4px #7e1c3a;
}

.recruit_info_block h2:first-letter{
color: #f8fff8;
background-color: transparent;
font-size: 48px;
}


/****************************************
       WEBコンテンツサムネイル
*****************************************/
/*topics*/
.topics_info{
	margin-top:32px;
	position: relative;
}

.topics_info h2{
margin-bottom: 10px;
padding-bottom: 10px;
color: #014099;
font-family: 'Open Sans', sans-serif;
font-size: 1.8em;
font-weight: 700;
letter-spacing: 0px;
border-bottom: #014099 solid 1px;
box-sizing: border-box;
position: relative;
}
			
.location{
font-size: 1.2em; 
display:block;
font-weight: 700;
color: #014099;
width:100%;
letter-spacing: 0px;
position: relative;
margin-bottom: 40px;
}

.topics_info ul::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.license p{
width:100%;
text-align:center;
font-size: 1.1em;
color:#333;
font-weight:600;
letter-spacing: 1px;
word-break: normal;
word-wrap: break-word;
}
/*
.web_site_link{
width:90%;
margin:0 auto;
}
*/
.dev_link{
width:90%;
margin:0 auto;
}
			
.dev_link li{
padding:10px;
}
			

/*コンテンツサムネイル*/
.webc{
width:180px;
height:100px;
display:block;
color:#014099;
padding:10px 10px 30px ;
}
/*
.topics_info li{
float:left;
}
*/
.topics_info a{
text-decoration:none;
color:#014099;
}

.webc_thumb{
width:180px;
height:100px;
}

.topics_info span{
font-weight:600;
display:block;
width:180px;
text-align:center;
padding:4px;
font-size:0.7em;
line-height:1.447;
}


.holiday{
padding:10px;
text-align:center;
font-size: 1.1em;
line-height:1.774;

letter-spacing: 0.1em;
}
			
.website_link_list ul{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows:140px;
	list-style-type:none!important;
	padding-left:24px!important;
}
			
.website_link_list  li{
	text-align: left;
	font-size: 1.0em;
}
			
/****************************************
       CSS レイアウト (PC)
*****************************************/
/*PCのみの表示*/

@media (max-width: 741px) {
	


#about_us ul li {
width: 100%;
height: auto;
min-height: auto;
float: none;
}

#about_us .textset{
margin-top:0px;
margin-left: 0px;
width:auto;
height: 300px;
display: block;
position: relative;
background:transparent;
padding:20px;
}
	/*企業情報*/
.company_info_block{
display:block;
position: relative !important;
bottom:2px;
left:0;
background:rgb(253, 253, 255,0.8);
width:100%;
height:auto;
margin-bottom:80px;
border-radius: 0 0 0.5em 0.5em;
box-shadow:
-5px 5px 15px rgba(66, 151, 255, 0.1),
 5px -5px 15px rgba(8, 131, 161, 0.1);
}

	/*事業内容*/
.business_info_block{
display:block;
position: relative !important;
bottom:2px;
left:0;
background:rgb(255, 253, 245,0.8);
width:100%;
height:auto;
margin-bottom:80px;
border-radius: 0 0 0.5em 0.5em;
box-shadow:
-5px 5px 15px rgba(255, 226, 66, 0.1),
 5px -5px 15px rgba(161, 127, 8, 0.1);
}

	/*リクルート*/
.recruit_info_block{
display:block;
position: relative !important;
bottom:2px;
left:0;
background:rgb(0,0,0,1);
width:100%;
height:auto;
margin-bottom:80px;
border-radius: 0 ;
box-shadow:none;
color:#fff;
}

.recruit_info_block h2{
margin-bottom: 20px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1.6em !important;
font-weight: 700;
letter-spacing: 0.1em;
position: relative;
text-shadow: none;
}
.recruit_info_block h2:first-letter{
color: #fff;
background-color: transparent;
font-size: 1.1em !important;
}



.webc{
width:100% !important;
height:auto !important;
padding: 0px;

}

.webc_thumb{
width:100%;
height:auto;
}

.topics_info span{
width:100%;
}

.license p{
	padding:5px 0px;
	font-size: 0.8em;
}




}



/****************************************
       CSS レイアウト (モバイル)
*****************************************/
/*モバイルのみの表示*/
@media (max-width: 481px) {
				
.website_link_list ul{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows:140px;
	list-style-type:none!important;
	padding:4px!important;
	 column-gap: 10px;
	 /* row-gap: 30px;*/
}
			

				
				
.web_site_link{
width:100%;
margin:0 auto;

}
				
.web_site_link ul{
	-webkit-column-count: 2;
	-moz-column-count: 2;
					column-count: 2;

}
				
.web_site_link li{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box!important;
	display: inline-block!important;
	list-style: none;
	padding-bottom: 0px;
	width: 100%;
	break-inside: avoid;
}

/*safari fix*/
_::-webkit-full-page-media, _:future, :root .web_site_link li{
display: inline-block;
break-inside: avoid;
margin-top: 0px;
margin-bottom:  0px;
}


@media (max-width: 321px) {


}