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

#contents section {
margin-bottom: 0;
}

/*mv*/
#mv {
  margin-bottom: 0;
  padding: 0 0 60px;
  overflow: hidden;
}

#mv .mvInr {
display: flex;
justify-content: flex-end;
position: relative;
/* overflow: hidden; */
}

#mv .mvInr .slider {
width: 80%;
max-width: 1690px;
}

.mvLink::before {
  background-color: rgba(199,110,204,0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  transition: .35s;
}

.mvLink:hover::before {
	opacity: 1;
}

#mv .copy {
position: absolute;
z-index: 989;
top: 25vh;
left: 3vw;
pointer-events: none;
}
@media only screen and (max-width: 900px) {
  #mv .copy {
    top: auto;
  }
}
#mv .text {
font-size: 2.604vw;
color: #222222;
letter-spacing: -0.08em;
line-height: 1.3;
text-shadow: 0px 0px 10px #fff;
font-weight: bold;
}
#mv .img {
width: 90%;
}
#mv .img img {
max-width: 565px;
}
.overL {
position: absolute;
left: -50px;
top: 0;
}

.overR{
position: absolute;
right: -10px;
bottom: 0;
pointer-events: none;
}






#contents {
  margin: 0 auto;
}

#contents .itemBox {
  float: left;
  position: relative;
  overflow: hidden
}

#contents .itemBox:after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.6s linear
}

#contents .itemBox.staff:after {
  background-image:url("../images/bg_staff.webp")
}


#contents .itemBox.news:after {
  background-color: #c76ecc
}

#contents .itemBox.welfare:after {
  background-image:url("../images/bg_welfare.webp")

}

#contents .itemBox.career:after {
  background-image:url("../images/bg_career.webp")

}
#contents .itemBox.sustainability:after {
  background-image:url("../images/bg_sustainability.jpg")

}
#contents .itemBox.numbers:after {
  background-image:url("../images/bg_numbers.webp")

}

#contents .itemBox.training:after {
  background-image:url("../images/bg_training.webp")

}
#contents .itemBox.network:after {
  background-image:url("../images/bg_network.webp")

}
#contents .itemBox.shiraishi-fsd:after {
  background-image:url("../images/bg_shiraishi-fsd.webp")

}

#contents .gridItem.network h2 {
    top: 30%;
}

#contents .grid_1 {
  width: 25%
}

#contents .grid_1:after {
  padding-top: 100%
}

#contents .grid_2 {
  width: 50%
}

#contents .grid_2:after {
  padding-top: 50%
}

#contents .grid_2_2 {
  width: 50%
}

#contents .grid_2_2:after {
  padding-top: 100%
}

/*#contents .grid_1_2 {
  width: 25%
}

#contents .grid_1_2:after {
  padding-top: 200%
}

#contents .grid_1_2:not(.gridItem):after {
  content: none
}

#contents .grid_1_2 .itemBox {
  float: none
}

#contents .grid_1_2 .itemBox:after {
  padding-top: 100% !important
}*/

/*#contents .grid_3 {
  width: 75%
}

#contents .grid_3:after {
  padding-top: 66.6666%
}

#contents .news.grid_3 {
  display: none
}*/


#contents .gridItem * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased
}

#contents .gridItem a {
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}





#contents .news {
  position: relative;
  line-height: 0
}

#contents .news>img {
  width: 100%;
  height: auto
}

#contents .news h2 {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 7%;
  left: 3%;
  border-bottom: 2px solid #fff;
   width: 95%;
}

#contents .news h2 span{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 52px;
  font-weight: 700;
  margin-right: 10px;

}

div.newsBox {
position: absolute;
height: 63%;
width: 95%;
top: 28%;
left: 3%;
overflow: auto;
}

div.newsBox ul {
padding-top: 5%;
}
div.newsBox ul li{
display: flex;
justify-content: space-around;
color: #fff;
font-size: 16px;
margin-bottom: 2%;
}

div.newsBox ul li p.date {
width: 25%;
}

div.newsBox ul li p.title {
width: 75%;
}
div.newsBox ul li p.title a {
color: #fff;
}
.newsBtn {
position: absolute;
right: 20px;
top: 20px;
width: 22%;
}
.newsBtn a {
padding: 10px 0;
display: block;
background: #fff;
color: #c76ecc;
text-align: center;
border-radius: 30px;
font-family: 'Josefin Sans', sans-serif;

}

.newsBtn a:hover {
background: #ab53b0;
color: #fff;
text-decoration: none;
}

/*h2*/


#contents .gridItem h2 {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  position: absolute;
}

#contents .gridItem h2 span{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 52px;
  display: block;
  font-weight: 700;
}
#contents .gridItem h2 span strong {
  font-size: 65px;
  display: block;
}
#contents .gridItem h2 span small {
  font-size: 30px;
}

#contents .gridItem.staff h2 {
  color: #000;
  top: 7%;
  left: 5%
}

#contents .gridItem.welfare h2,
#contents .gridItem.training h2,
#contents .gridItem.movie h2,
#contents .gridItem.sustainability h2{
width: 100%;
text-align: center;
top: 40%;
left: 0;
}

@media only screen and (max-width: 1300px) {
  #contents .gridItem.sustainability h2{
    top: 20%;
  }
}
@media only screen and (max-width: 900px) {
  #contents .gridItem.sustainability h2{
    top: 40%;
  }
}

#contents .gridItem.numbers h2{
width: 100%;
text-align: center;
top: 35%;
left: 0;
}


#contents .gridItem.training h2 small{
display: block;
}

#contents .gridItem.career h2 {
  top: 7%;
  left: 5%
}

#contents .gridItem.network h2{
color: #000;
}

/*---------------*/
/***** Chico *****/
/*---------------*/

figure.effect-chico::before {
background-color: rgba(199,110,204,0.5);
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 content: '';
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}

figure.effect-orange::before {
  background-color: rgba(241, 139, 91, 0.5);
}

figure.effect-chico::before {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

#contents .gridItem:hover figure.effect-chico::before {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico figcaption {
	padding: 3em;
}

figure.effect-chico figcaption::before {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border: 2px solid #fff;
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

figure.effect-chico figcaption::before {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico:hover figcaption::before {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

#contents .ayumiBox {
background: url("../images/bg_ayumi.webp") center center no-repeat;
background-attachment: fixed;
}

#contents .ayumiBox a {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 0;
}
#contents .ayumiBox a:hover {
text-decoration: none;
}
#contents .ayumiBox .Img {
  text-align: center;
}
#contents .ayumiBox h2 {
  color: #000;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  position: relative;
}

#contents .ayumiBox h2 span{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 52px;
  display: block;
  font-weight: 700;
  font-style: italic;
}
@media only screen and (max-width: 1450px) {
  #contents .gridItem.staff h2 span strong {
  font-size: 56px;
  }
  #contents .gridItem.staff h2 span {
  font-size: 42px;
  }
}

@media only screen and (max-width: 1200px) {
  #contents .gridItem.staff h2 span strong {
    font-size: 40px;
  }
  #contents .gridItem.staff h2 span {
    font-size: 32px;
  }
}

/*---------------*/
/*2末以降削除*/
/*---------------*/


.nolink {
background: #eee;
text-align: center;
}

#contents .gridItem.nolink h2 {
color: #000;
position: inherit;
width: 100%;
line-height: 1.3;
}
#contents .gridItem.nolink p.Img {
padding-top: 80px;
}
#contents .gridItem.nolink div {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*---------------*/
/*add*/
/*---------------*/
#contents .itemBox.movie:after {
  background-image:url("../images/sample.gif");
  background-size:auto;

}
@media only screen and (max-width: 900px) {
#contents .itemBox.movie:after {
  background-size:cover!important;

}
}

.tNews {
background: #454545;
width: 100%;
padding-top: 10px;
}

.tNews ul {
    margin: 0 auto;
    max-width: 1280px;
    width: 97%;
}
.tNews ul li{
display: flex;
justify-content: space-around;
font-size: 16px;
margin-bottom: 2%;
}

.tNews ul li p.date {
width: 15%;
color: #c76ecc;
}

.tNews ul li p.title {
width: 80%;
}
.tNews ul li p.title a {
color: #fff;
}