@charset "utf-8";

/*全体のコンテンツ------------------------------*/
.contents {
    clear: both;
    overflow: hidden;
    padding-top: 0px;    /*上に空けるボックス内の余白*/
	  padding-bottom: 40px;    /*下に空けるボックス内の余白*/
	  margin:0 auto;
    width:100%;
}



/*-----------トップページ画像ズームアウト----------------------*/

.top_wrapper {
    position: relative;
    width:100%;
}
.img-frame{
    position: relative;
    width: 90%;
    height: 60vh;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 25px;
 }
 .img-frame::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .1);
 }
 .slide1, .slide2, .slide3{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
 }
 .slide1{
    background-image: url('../images/teck.jpg');
    animation: slide-animation-01 24s infinite;
 }
 .slide2{
    background-image: url('../images/toho.jpg');
    animation: slide-animation-02 24s infinite;
 }
 .slide3{
    background-image: url('../images/training.jpg');
    animation: slide-animation-03 24s infinite;
 }
 @keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
    30% {opacity: 1;}
    40% {opacity: 0; transform: scale(1.15);}
    90% {opacity: 0}
    100% {opacity: 1; transform: scale(1.0);}
 }
 @keyframes slide-animation-02 {
    0% {opacity: 0;}
    30% {opacity: 0; transform: scale(1.1);}
    40% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0; transform: scale(1.0);}
    100% {opacity: 0;}
 }
 @keyframes slide-animation-03 {
    0% {opacity: 0;}
    60% {opacity: 0;  transform: scale(1.0);}
    70% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0; transform: scale(1.1);}
 }

 .reform img{
    position:absolute;
    top:80%;
    right:10%;
    width:40%;
}

/* ----------未来づくり画面トップ----------- */
.title {
    position: absolute;
    top:5%;
    left:7%;
    padding: 1em 0 0 1em;
    grid-column: 1/-1;
    grid-row: 1;
    font-size: 4vw;
    font-weight: 600;
    color:#fff;
    text-shadow:3px 3px .5px #3f3e3e;
    width: 100%;
    z-index: 2;
}

.title > .title-inner {
  display: inline-block;
}

@keyframes text-clip {
  from {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes outer-left {
  from {
    transform: translateX(40%);
  }
  to {
    transform: none;
  }
}
@keyframes inner-left {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: none;
  }
}
.cafe,
.mozart {
  animation: outer-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.title-inner {
  display: inline-block;
  animation: inner-left 1s 1s ease both;
}

.cafe-inner {
  display: inline-block;
  animation: inner-left 1s 1s ease both, text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.mozart-inner {
  animation: text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.title {
  animation: outer-left 1s 1s ease both;
}

.cafe > .cafe-inner {
  display: inline-block;
}

.mozart {
  display: inline-block;
}

/*------------お知らせ--------------------------------------------*/

.wrapper_news {
    position:relative;
    margin: 5% 0;
}

.news-list{
  list-style: none outside;
  margin: 0 20% 0;
  padding-bottom: 5%;
  font-size: 1.2vw;
  height: 120px;
  overflow-y: scroll;
}

.news-list .item {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #000;
  border-bottom: 1px solid #CCC;
  padding: 10px 20px;
}

.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #000;
}
.news-list .item:first-child a{
  'border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 140px;
  color: #000;
  padding: 0 20px 0 0;
}
.news-list .item .category{
  margin: 0;
  min-width: 140px;
  padding: 0 20px 0 0;
}
.news-list .item .category span{
  background: #2926e2b0;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
}
.news-list .item .news a{
  margin: 0;
  width: 100%;
  color: #00F;
}


/* ---------VISION---------------------- */
.vision_msg {
    position: relative;
    width:70%;
    margin: 0 auto;
    font-size:1.2vw;
    color:#000;
}

/*-----------COMPANY----------------------*/
.wrapper {
    position:relative;
    margin-top: 10%;
}
.inner{
  max-width: 100%;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 50px 0 0;
}
.box{
  display: flex;
  flex-direction: row;
 	background: #599eee4b;
}
.box.reverse{
  flex-direction: row-reverse;
}
.box + .box{
  margin-top: 80px;
}
.box__body{
  width: 50%;
  padding: 0 20px;
}
.box__ttl {
    text-align:center;
    font-size:4vw;
    font-family: BIZ UDゴシック;
    font-weight: 600;
    color: #fff;
    -webkit-text-stroke: .5px #000;
    text-stroke: .5px #1a1919;
    text-shadow:2px 2px 2px rgba(0, 0, 0, .5);
    vertical-align: top;
    line-height: 2;
    z-index:999;
}
.box＿subttl {
    text-align: center;
    font-size:1.5vw;
    font-weight: bold;
}
.box__txt {
  margin: 20px 60px 0;
  font-size:1vw;
}
.box__image{
  width: 50%;
}
.box__image img{
  height: 100%;
  object-fit: cover;
}



/*-----------SERVICE----------------------*/
.wrapper_job {
  position:relative;
  margin: 10% auto 0;
}

.box__txt＿work{
  width:80%;
  margin: 20px auto 0;
  font-size: 1vw;
}
.job {
  position: relative;
  margin:0 auto 25%;
  width:100%;
  text-align:center;
}
.job li {
	display:inline-block;
	width:25%;
  margin:2% 1%;
  vertical-align:top;
  box-shadow: 0px 38px 27px 0px rgba(17,17,26,0.18);
}
.job li:nth-of-type(2){
	transition-delay: .2s;
}
.job li:nth-of-type(3){
	transition-delay: .4s;
}
.job li:nth-of-type(4){
	transition-delay: .6s;
}
.jobs-name {
	position:absolute;
	top:80%;
  background:#fff;
  padding:3% 6%;
  font-size:1.2vw;
  font-weight:bold;
	color:#000;
  border-radius:0 15px 0 0;
}
.jobs {
	position:absolute;
  top:100%;
  background:#fff;
  text-align:left;
  padding: 5%;
  font-size:1.2vw;
	color:#000;
  border-radius:0 0 15px 15px;
  box-shadow: 0 10px 20px #ccc;
}
.se {
	filter:saturate(150%);
	border-radius:15px 15px 0 0;
}

/*--------------------仕事内容WORK----------------*/


/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1s ease-out;
 }

/*--------------------採用情報----------------*/
.wrapper_seido {
  position:relative;
  margin-top: 10%;
}
.rec_box {
	margin:auto;
  width:80%;
}
.rec_img{
  display:inline-block;
  vertical-align:top;
  float:right;
  width:30%;
}
.rec_img img{
	float:right;
  filter:saturate(130%) brightness(100%) drop-shadow(3px 5px 5px rgba(0, 0, 0, .3));
  border-radius: 20%;
}
.rec_text {
  display:inline-block;
  width:60%;
}
.rec_text .rec_title{
  font-size:2vw;
  font-weight:600;
  color:#000;
  'word-break: keep-all;
}

.rec_message{
	margin: 2% 0 5%;
  font-size:1.2vw;
	color:#000;
}

/*--------------------環境制度----------------*/
.box__txt＿seido{
  width:80%;
  margin: 20px auto 0;
  font-size: 1vw;
}

.seido {
  display:block;
}
.seido-message {
	width:70%;
  font-size:1.2vw;
  margin: 0 auto;
  padding:0;
	color:#000;
}
.seido-message span {
  font-size:2vw;
  font-weight:600;
  padding:1.5% 0;
  text-align:center;
  color:#000;
  'word-break: keep-all;
}
.seido-3{
  margin:0 auto;
  width:80%;
}
.seido-3 ul {
  display: flex;
  justify-content: space-between;
}
.seido-3 li{
  list-style:none;
  margin:2% 4%;
}
.seido-3 li:nth-of-type(2){
	transition-delay: .2s;
}
.seido-3 li:nth-of-type(3){
	transition-delay: .4s;
}
.seido-3 li:nth-of-type(4){
	transition-delay: .6s;
}
.seido-3 p {
  font-size: 1vw;
  padding:0 5%;
}
.seido-3 a {
  margin: auto;
}
.seido1, .seido2, .seido3 {
	float:right;
  border-radius: 50%;
  box-shadow: 0 10px 10px -7px #666;
}
.seido_box {
  float: left;
  margin: 5% 0;
}

/*-----------------------------タブレット----------------------------------*/
@media screen and (max-width:1024px) {
  

}


/*-------------------------------スマホ------------------------------------*/
@media screen and (max-width:768px) {
  .img-frame{
    height: 200px;
  }
  .news-list {
    margin:0 5% 5%;
    font-size: 2vw;
    height: 100px;
  }
  .news-list .item {
    padding: 8px 20px;
  }
  .news-list .item a{
    flex-wrap: wrap;
  }
  .news-list .item .date{
    min-width: 60px;
  }
  .news-list .item .category{
    margin: 0;
    min-width: 60px;
    padding: 0 10px 0 0;
  }
  .news-list .item .category span{
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1.4vw;
    line-height: 1;
  }
  .vision_msg {
    width:90%;
    font-size: 2vw;
    color:#000;
  }
  
  .box {
    display: block;
  }
  .box + .box{
    margin-top: 60px;
  }
  .box__body{
    width: 100%;
    padding: 0;
  }
  .box__ttl {
    font-size:7vw;
  }
  .box＿subttl {
    font-size:3vw;
  }
  .box__txt {
    margin: 20px 60px 0;
    font-size:2vw;
  }
  .box__image{
    margin-top: 20px;
    width: 100%;
  }
  
  .box__txt＿work{
    font-size: 2vw;
  }
	.job {
		width:100%;
	}
	.job li{
		display: inline-block;
		width: 36%;
		margin: 5% 1% 10%;
	}
	.jobs-name {
    font-size:2vw;
	}
	.jobs {
    font-size:1.8vw;
	}
  .rec_box {
    width:100%;
  }
  .rec_img{
    position: absolute;
    right:0;
    width: 40%;
  }
  .rec_text {
    width:75%;
    margin-left: 5%;
  }
	.rec_text .rec_title{
    width:70%;
		font-size:2.8vw;
	}
	.rec_message{
		width:60%;
		margin:2% 0;
		padding:2%;
    font-size:1.8vw;
		color:#000;
	}
  .seido {
		width:100%;
    margin:auto;
    background:#def1f1;
	}
  .box__txt＿seido{
    font-size: 2vw;
  }
	.seido-message {
		width:75%;
    margin:0 auto;
	}
	.seido-message span {
    font-size:2.8vw;
	}
	.seido-message p{
		margin:2% 0;
    font-size:1.8vw;
	}
	.seido-3{
    width:95%;
	}
	.seido-3 ul{
	  display:inline-block;
	}
	.seido-3 li{
    display:flex;
	  margin-top:5%;
	}
  .seido_box {
    float: left;
    margin: 10% 0;
  }
  .seido p {
    font-size: 2vw;
    background: #ffffff;
    border-radius: 10px;
  }
  .seido-3 a {
    float: center;
  }
	.seido1, .seido2, .seido3 {
		width:40%;
		clip-path : circle(45% at 50% 50%);
	}
}