@charset "UTF-8";

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden;
background: #eeeeee;

display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100vh;
}
.hidden {
width: 100%;
overflow: hidden;
}
.br_hidden{
display: none;
}
@media screen and (min-width: 1024px) {
.br_hidden{
display: block;
}}

/*	 loading
/* ------------------------------------- */
.loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #100964;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeOut 1s 2s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 175px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}


/*スライド
---------------------------------------------------------------------------*/
.rslides_box {
width: 100%;
height: 100vh;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.movie {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

.rslides_box .text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
}

@media screen and (max-width: 767px) {
.rslides_box .text{
top: 45%;
width:350px;
}
}



/* 表示・非表示
---------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {.slsp{display: none !important;}}
@media screen and (max-width: 767px) {.slpc{display: none !important;}}



/*スクロールダウン
---------------------------------------------------------------------------*/
/*スクロールダウン全体の場所*/
.scrolldown1{
position:absolute;
left:50%;
bottom:10px;
height:50px;
}
.scrolldown1 span{
position: absolute;
left:-15px;
top: -15px;
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
.scrolldown1::after{
content: "";
position: absolute;
top: 0;
width: 1px;
height: 30px;
background: #eee;
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}
@keyframes pathmove{
0%{
height:0;
top:0;
opacity: 0;
}
30%{
height:30px;
opacity: 1;
}
100%{
height:0;
top:50px;
opacity: 0;
}}


/*背景
---------------------------------------------------------------------------*/
#bg_message{
width: 100%;
padding: 80px 0;
color: #fff;
}
#bg_news{
width: 100%;
padding: 50px 0 100px 0;
}
#bg_recruit{
width: 100%;
padding: 50px 0;
}
.bg-con-pc{
width: 100%;
margin: 0 auto
}
#bg_business{
width: 100%;
background-color: #100964;
padding: 50px 0;
}

@media screen and (min-width: 768px) {
#bg_message{
padding: 100px 0;
background: url(../img/top/bg_me.jpg) no-repeat;
background-size: cover;
background-position: bottom;
}
#bg_news{
padding: 60px 0 100px 0;
}
#bg_recruit,
#bg_business{
padding: 60px 0;
}
.bg-con-pc{
width: 500px;
}
}
@media screen and (max-width: 767px) {
#bg_message{
background: url(../img/top/bg_me_s.jpg) no-repeat;
background-size: cover;
background-position: bottom;
}
}

/*全体見出し
---------------------------------------------------------------------------*/
.section-news-h3,
.section-fff-h3{
text-align:center;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
letter-spacing:-.05em;
margin: 0 0 20px 0;
color: #000
}
.section-news-h3{
color: #000
}
.section-fff-h3{
color: #fff
}

.section-news-h3 span,
.section-fff-h3 span{
font-size: 10px;
display: block;
letter-spacing:.05em;
}
@media screen and (min-width: 1024px) {
.section-news-h3,
.section-fff-h3{
font-size: 3em;
margin: 0 0 30px 0;
}
.section-news-h3 span,
.section-fff-h3 span{
font-size: 12px;
}
}


/*メッセージ
---------------------------------------------------------------------------*/
.message-h3{
font-size: 2em;
line-height: 1.2;
font-weight: normal;
letter-spacing:.05em;
margin: 0 0 20px 0;
text-align: center
}
.t_message{
margin-bottom: 30px;
line-height: 2;
}
@media screen and (min-width: 768px) {
.t_message{
line-height: 2.2;
}
} 


/*リクルートバナー
---------------------------------------------------------------------------*/
.parallax-box {
  clip-path: inset(0);
  width: 100%;
  height: 350px;
  padding: 16px;
  box-sizing:border-box;
  color: #fff;
	position: relative
}
.parallax-box::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width:100%;
  height:100%;
  background-size: cover;
  background-image: url('../img/top/recruit.jpg');
	background-position: center center;
}
.parallax-box:before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(16 9 100 / .5);
  content: "";
}
.parallax-box:hover {
opacity: 0.8;
transition: 0.8s;
}
.t_recruit {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  }
.t_recruit p {
text-align: center;
line-height: 1.6;
}
@media screen and (max-width: 1023px) {
.parallax-box {
height: 250px
}
.parallax-box::after {
  background-image: url('../img/top/recruit_s.jpg');
}
.t_recruit p {
font-size: 80%;
line-height: 1.4;
}
}


/*業務案内
---------------------------------------------------------------------------*/
.business3{
flex-wrap: wrap;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	white-space: nowrap;
list-style:none;
max-width: 100%;
}
.business3 li a{
text-decoration: none;
}

.business3 li:hover {
opacity: 0.8;
transition: 0.8s;
}

.business3 li{
width: 100%;
height: auto;
font-size: 1em;
text-align: center;
position: relative;
}
.business3 li a{
color: #fff;
display: block;
}
.business3 li a:before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(16 9 100 / .5);
content: "";
}

.b_img img {
width: 100%;
height: 200px;
object-fit: cover;
}
.b_bana {
color: white;/*文字は白に*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.b_bana h5{
text-align: center;
font-size: 1.3em;
line-height: 1.5em;
padding:0
}

.number-01 {
font-family: 'Noto Serif JP', serif;
  font-size: 1.2em;
  line-height: 1.1;
  bottom: 1rem;
	 padding: 0 0 1rem 0;
	color: #fff;
	font-weight: bold;
	margin-bottom: 20px;	
	background:linear-gradient(transparent 98%, #fff 2%);
	width: fit-content;
	box-sizing: border-box;
  text-align: center; 
  margin-inline: auto;
}
.number-01 span{
font-size: 50px;
}
.number-01:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}



@media screen and (min-width: 1024px) {
.business3 li{
width: calc(100% / 3);
height: auto;
font-size: 1em;
text-align: center;
position: relative;
}
.b_img img {
 height: 350px;
}
.number-01 {
font-size: 1.6em;
}
.number-01 span{
font-size: 70px;
}
}
@media screen and (max-width: 1023px) {
.business3 li{
margin-bottom: 10px
}
.business3 li::last-child {
margin-bottom: 0
}
.b_bana h5{
font-size: 1.1em;
line-height: 1.3em;
}
}




@media screen and (min-width: 768px) {

} 
@media screen and (min-width: 1024px) {

}
@media screen and (min-width: 1200px) {

}