@charset "UTF-8";
/*============================
loading
============================*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  background-color: #533b70;
}
.loader, .loader:after {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
}
.loader {
  position: relative;
  text-indent: -9999em;
  border-top: 3px solid #7d7d7d;
  border-right: 3px solid #7d7d7d;
  border-bottom: 3px solid #7d7d7d;
  border-left: 3px solid #FFF;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
 @-webkit-keyframes load8 {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes load8 {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
/*============================
container
============================*/
.top_img {
  width: 100%;
  height: 100vh;
  background: url("../images/home/header/slider/01.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
}
.bx-viewport {
  left: 0;
  box-shadow: none;
  border: none;
}
.key_slider li {
  height: 100vh;
  background: center / cover no-repeat;
  animation: zoom 18s;
}
.key_slider li.img01 {
  background-image: url(../images/home/header/slider/01.jpg);
}
.key_slider li.img02 {
  background-image: url(../images/home/header/slider/02.jpg);
}
.key_slider li.img03 {
  background-image: url(../images/home/header/slider/03.jpg);
}
.key_slider li.img04 {
  background-image: url(../images/home/header/slider/04.jpg);
}
.key_slider li.img05 {
  background-image: url(../images/home/header/slider/05.jpg);
}
.key_slider li.img06 {
  background-image: url(../images/home/header/slider/06.jpg);
}
@keyframes zoom {
 0% {
 transform: scale(1)
}
 100% {
 transform: scale(1.2)
}
}
.top_img .inner {
  height: 100vh;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -490px;
}
.top_img h1 {
  width: 540px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -115px;
  margin-left: -270px;
  z-index: 9999;
}
.load .top_img h1::before, .load .top_img h1::after {
  content: "";
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  bottom: 84px;
}
.load .top_img h1::before {
  left: 50%;
  opacity: 0;
  animation: line_right 0.3s forwards;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
}
@keyframes line_right {
 0% {
 opacity: 0;
 width: 0;
}
 100% {
 opacity: 1;
 width: 50%;
}
}
.load .top_img h1::after {
  right: 50%;
  opacity: 0;
  animation: line_left 0.3s forwards;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
}
@keyframes line_left {
 0% {
 opacity: 0;
 width: 0;
}
 100% {
 opacity: 1;
 width: 50%;
}
}
.top_img h1 strong {
  display: block;
  width: 440px;
  padding-top: 128px;
  height: 0;
  overflow: hidden;
  background: url(../images/common/logo/02.svg) no-repeat left top;
  background-size: 100%;
  margin: 0 auto 0 auto;
  opacity: 0;
}
.load .top_img h1 strong {
  transform: translateY(20px);
  animation: co_name 0.8s forwards;
  animation-delay: 0.6s;
}
@keyframes co_name {
 0% {
 opacity: 0;
 transform: translateY(20px);
}
 100% {
 opacity: 1;
 transform: translateY(0);
}
}
.top_img h1 span {
  display: block;
  color: #FFF;
  font-weight: 300;
  opacity: 0;
}
.top_img h1 span.eng {
  font-size: 22px;
  padding: 20px 0 0 0;
  margin: 17px 0 0 0;
  letter-spacing: 0.15em;
}
.top_img h1 span.ja {
  font-size: 16px;
  padding: 0;
  letter-spacing: 0.15em;
}
.load .top_img h1 span {
  opacity: 0;
  transform: translateY(-20px);
  animation: catch 0.8s forwards;
  animation-delay: 0.6s;
}
@keyframes catch {
 0% {
 opacity: 0;
 transform: translateY(-20px);
}
 100% {
 opacity: 1;
 transform: translateY(0);
}
}
a.scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
  padding-top: 60px;
}
a.scroll span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 86px;
  height: 86px;
  margin-left: -43px;
  border-radius: 100%;
  box-sizing: border-box;/*background-color: rgba(0, 0, 0, 0.25);*/
}
a.scroll span::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 86px;
  height: 86px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.1);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb 3s infinite;
  animation: sdb 3s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
 0% {
 opacity: 0;
}
 30% {
 opacity: 1;
}
 60% {
 box-shadow: 0 0 0 60px rgba(255,255,255,.1);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@keyframes sdb {
 0% {
 opacity: 0;
}
 30% {
 opacity: 1;
}
 60% {
 box-shadow: 0 0 0 60px rgba(255,255,255,.1);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
.icon_scroll {
  width: 40%;
  height: auto;
  display: block;
  margin: 21px auto 0 auto;
}
/* catch animation*/
.load .top_img h1 {
}
.top_img h1 strong {
}
.top_img h1 span {
}
.top_img h1 span.eng {
}
.top_img h1 span.ja {
}
/* stomp */






/*============================
container
============================*/
.container {
  position: relative;
  text-align: left;
}
.primary {
  width: 100%;
  float: none;
}
.primary > article {
  padding: 80px 0 80px;
}
.primary .inner {
  width: 980px;
  margin: auto;
}
.link {
  padding-top: 40px;
}
.link a {
  width: 366px;
  margin: auto;
  display: block;
  padding: 0 0;
  color: #fff;
  background: transparent;
  border-left: 1px solid rgba(255,255,255,0.2);
  border-right: 1px solid rgba(255,255,255,0.2);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-size: 18px;
  text-align: center;
  position: relative;
}
.link a span {
  display: inline-block;
  position: relative;
  background: url(../images/common/icon_arrow01.svg) no-repeat center right;
  background-size: 12px 15px;
  padding: 18px 14px 19px 0;
}
.link a:hover {
  animation: frameY 0.6s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  border-left: 1px solid rgba(255,255,255,0.6);
  border-right: 1px solid rgba(255,255,255,0.6);
  opacity: 1;
}
@keyframes frameY {
 0% {
 border-left: 1px solid rgba(255,255,255,0.3);
 border-right: 1px solid rgba(255,255,255,0.3);
}
 100% {
 border-left: 1px solid rgba(255,255,255,0.6);
 border-right: 1px solid rgba(255,255,255,0.6);
}
}
.link a::before, .link a::after {
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.2);
  position: absolute;
}
.link a::before {
  top: 0;
  left: 0;
}
.link a::after {
  bottom: 0;
  right: 0;
}
.link a:hover::before, .link a:hover::after {
  width: 100%;
  background: rgba(255,255,255,0.6);
  animation: frameX 0.6s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
@keyframes frameX {
 0% {
 width: 0;
 background: rgba(255,255,255,0.2);
}
 100% {
 width: 100%;
 background: rgba(255,255,255,0.6);
}
}
/*
.link a span::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/common/icon_arrow01.svg) no-repeat top left;
  background-size: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
*/


#service h2, #works h2, #recruit h2, #company h2 {
  width: 253px;
  padding-top: 49px;
  height: 0;
  overflow: hidden;
  background: url(../images/home/service/title.svg) no-repeat left top;
  background-size: 100%;
  margin: auto;
}
/*============================
about
============================*/
#news {
  background: #564965;
  color: #FFF;
}
#news h2 {
  text-align: center;
  position: absolute;
  top: -22px;
  left: 50%;
  margin-left: -54px;
}
#news h2 span {
  display: inline-block;
  position: relative;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.15em;
}
#news h2 span::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../images/common/icon_news.svg) no-repeat top left;
  background-size: 100%;
  position: absolute;
  top: 9px;
  left: -20px;
}
#news .detail {
  background: none;
  position: relative;
  background: rgba(0,0,0,0.15);
}
#news .news_list {
  padding: 40px 20px;
  position: relative;/* border-bottom: 1px solid rgba(255,255,255,0.15); */
}
#news .news_list::before, #news .news_list::after {
  content: "";
  width: 40.2%;
  height: 1px;
  background: rgba(255,255,255,0.15);
  position: absolute;
  top: 0;
}
#news .news_list::before {
  left: 0;
}
#news .news_list::after {
  width: 41.2%;
  right: 0;
}
#news .news_list li {
  background: rgb(112, 103, 121);
  width: 300px !important;
  height: 200px;
  position: relative;
  border-radius: 2px;
  display: block !important;
}
#news .news_list li span.name {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: bold;
}
#news .news_list li span.name .mark {
  position: relative;
  font-size: 15px;
}
#news .news_list li span.name .mark::after {
  content: "";
  width: 13px;
  height: 13px;
  background: url(../images/common/icon_photo01.svg) no-repeat top left;
  background-size: 13px;
  position: absolute;
  top: 3px;
  right: -16px;
}
#news .news_list li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  border-radius: 2px;
}
#news .news_list a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 9999;
}
#news .news_list a:hover {
  background: rgba(0, 0, 0, 0.36);
}
#news .news_list .slick-arrow {
  border: none;
  width: 52px;
  padding-top: 6px;
  height: 0;
  overflow: hidden;
  background: url(../images/home/news/arrow_left.svg) no-repeat left center;
  background-size: 100%;
  position: absolute;
  top: 45%;
  z-index: 9999;
  padding: 15px 0;
  color: transparent;
  background-color: transparent;
}
#news .news_list .slick-arrow:hover {
  cursor: pointer;
  opacity: 0.6;
  transition: 0.8s;
}
#news .news_list .slick-arrow.slick-prev {
  left: -29px;
}
#news .news_list .slick-arrow.slick-next {
  background-image: url(../images/home/news/arrow_right.svg);
  right: -17px;
  background-color: transparent;
  padding: 15px 0;
  background-position: center;
  color: transparent;
}
#news .news_list li.news_info {
  /*background: url(../images/home/news/news_info.png) no-repeat top center;*/
  position: relative;
  background-size: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 52px 20px 30px 20px;
}
#news .news_list li.news_info::after {
  content: "［ Information ］";
  position: absolute;
  top: 20px;
  font-size: 14px;
  text-align: center;
  width: 300px;
  left: 0;
  font-weight: bold;
  letter-spacing: 0.16em;
}
#news .news_list li.news_info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 0px;
  width: 0px;
  border-top: 0px solid transparent;
  border-left: 20px solid #493d56;
  border-right: 0px solid transparent;
  border-bottom: 22px solid transparent;
}
#news .news_list li.news_info a {
  display: none;
}
#news .news_list li.news_info img {
  display: none;
}
#news .news_list li.news_info .name {
  display: none;
}
#news .news_list li .date_news {
  display: none;
}
#news .news_list li .date_news, #news .news_list li .date_works {
  display: block;
  font-size: 13px;
  font-weight: normal;
  padding-bottom: 2px;
}
#news .news_list li .date_works {
  padding-bottom: 0;
}
#news .news_list li .text {
  display: none;
}
#news .news_list li.news_info .text {
  display: block;
  overflow: hidden;
  height: 90px;
}
#news .news_list li.news_info .text p {
  font-size: 14px;
}
/*============================
information
============================*/
#information {
  padding: 10px 20px 40px;
}
#information h2 {
  margin-left: -65px;
  z-index: 9999;
}
#information .detail {
  padding: 0 0;
  background: none;
  position: relative;
}
#information .information_list li {
  overflow: hidden;
  padding: 8px 12px;
  position: relative;
  background: rgba(0,0,0,0.20);
}
#information .information_list li:nth-child(2n) {
  background-color: rgba(0,0,0,0.3);
}
#information .information_list a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 9999;
}
#information .information_list a:hover {
  background: rgba(255, 255, 255, 0.30);
}
#information .information_list li h3 {
  float: left;
  font-size: 15px;
  padding-top: 0px;
}
#information .information_list li .date {
  display: block;
  float: left;
  font-size: 15px;
  border-right: 1px solid #645c6f;
  padding: 0 10px 0 0;
  margin: 0 10px 0 0;
}
#information .information_list::before, #information .information_list::after {
    content: "";
    width: 39.2%;
    height: 1px;
    background: rgba(255,255,255,0.15);
    position: absolute;
    top: 0;
}
#information .information_list::after {
    width: 39.2%;
    right: 0;
}
.info_more {
  display: block;
  width: 58px;
  text-align: left;
  color: #ffd100;
  font-weight: bold;
  font-size: 16px;
  margin: 3px 0 0 0;
  position: relative;
  padding: 0 0;
  position: absolute;
  right: 5px;
  letter-spacing: 0.1em;
  bottom: -30px;
}
.info_more:hover {
  opacity: 1;
}
.info_more::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 8px;
    height: 0;
    width: 0;
    border-top: 0px solid transparent;
    border-left: 6px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 6px solid #ffd000;
}
.info_more:hover::before {
  content: "";
  width: 0%;
  height: 1px;
  background: #ffd000;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: info_more 0.5s cubic-bezier(.23, 1, .32, 1) forwards;
}
@keyframes info_more {
 0% {
  width: 0%;
}
 100% {
  width: 100%;
}
}






/*============================
recruit
============================*/
#service {
  background: url(../images/home/service/bg.jpg) repeat;
  color: #FFF;
  padding: 45px 0 0;
}
#service h2 {
  margin-bottom: 40px;
}
#service a {
  color: #FFF;
}
#service strong {
  font-weight: 300;
}
#service ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #000;
}
#service ul li {
  width: 50%;
}
#service ul li a {
  height: 320px;
  display: block;
  background: url(../images/home/service/chipping.jpg) no-repeat bottom center;
  background-size: cover;
  position: relative;
  text-align: center;
  letter-spacing: 0.15em;
}
#service ul li a:hover {
  opacity: 0.8;
}
#service ul li.chipping a {
  background-image: url(../images/home/service/chipping.jpg);
}
/*
  #service ul li.chipping a:hover {
  opacity: 1;
  background-image: url(../images/home/service/chipping_on.jpg);
}
*/
#service ul li.compressor a {
  background-image: url(../images/home/service/compressor.jpg);
}
/*
#service ul li.compressor a:hover {
  opacity: 1;
  background-image: url(../images/home/service/compressor_on.jpg);
}
*/
#service ul li.demolition a {
  background-image: url(../images/home/service/demolition.jpg);
}
/*
#service ul li.demolition a:hover {
  opacity: 1;
  background-image: url(../images/home/service/demolition_on.jpg);
}
*/
#service ul li.diamondcore a {
  background-image: url(../images/home/service/diamondcore.jpg);
}
/*
#service ul li.diamondcore a:hover {
  opacity: 1;
  background-image: url(../images/home/service/diamondcore_on.jpg);
}
*/
#service ul li a strong {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -33px;
  left: 50%;
  margin-left: -85px;
}
#service ul li a strong.fx {
  opacity: 0;
  transform: translateY(30px);
}
#service ul li a strong.fx.stomp {
  animation: fx_up 0.5s forwards;
  animation-delay: 0;
}
@keyframes fx_up {
 0% {
 opacity: 0;
 transform: translateY(30px);
}
 100% {
 opacity: 1;
 transform: translateY(0);
}
}
#service ul li a span {
  font-size: 24px;
  position: relative;
  display: inline-block;
}
#service ul li a span::after {
  content: "";
  width: 16px;
  height: 17px;
  background: url(../images/common/icon_arrow01.svg) no-repeat top left;
  background-size: 100%;
  position: absolute;
  top: 13px;
  right: -20px;
}
/*============================
works
============================*/
#works {
  background: #304363;
  color: #FFF;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
#works.fx::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  background: #304363;
  z-index: 9999;
  width: 50%;
}
#works.fx.stomp::after {
  opacity: 1;
  animation: wall 0.7s forwards;
  animation-delay: 0.2s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
@keyframes wall {
 0% {
 width: 50%;
}
 100% {
 width: 0;
}
}
#works h2 {
  width: 200px;
  padding-top: 32px;
  background-image: url(../images/home/works/title.svg);
  margin-bottom: 40px;
}
#works .text, #works .photo, #recruit .text, #recruit .photo, #company .text, #company .map {
  width: 50%;
}
#works .text, #recruit .text, #company .text {
  padding: 7% 6%;
  position: relative;
}
#works .photo, #recruit .photo, #company .photo {
  background: #2f4264;
}
#works h3, #recruit h3 {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 20px;
  margin-left: -0.5em;
}
#works ul.list {
  overflow: hidden;
}
#works ul.list li {
  float: left;
  padding-bottom: 5px;
}
#works ul.list li::after {
  content: "/";
  padding: 0 0.6em;
}
#works ul.list li:last-child::after {
  content: "...";
}
#works .bwWrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 6% 0;
}
#works .bwWrapper::before {
  content: none;
}
#works .bwWrapper::after {
  content: none;
}
#works .bwWrapper li {
  width: 31%;
  height: 200px;
  margin-bottom: 3.5%;
  position: relative;
}
#works .bwWrapper li:nth-child(4), #works .bwWrapper li:nth-child(5), #works .bwWrapper li:nth-child(6) {
  margin-bottom: 0;
}
#works .bwWrapper li::before, #works .bwWrapper li::after {
  display: none;
}
#works .bwWrapper li::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: url(../images/common/icon_photo01.svg) no-repeat bottom 6px right 6px #2f4264;
  background-size: 15px;
}
#works .bwWrapper li a {
  display: block;
  width: 100%;
  height: 100%;
}
#works .bwWrapper li a:hover {
  opacity: 1;
}
#works .bwWrapper li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#works .fancybox-caption span {
  padding: 0 0 0 0;
  font-size: 18px;
}
.fancybox-container .btn_more {
  width: 200px;
  height: 50px;
}
.fancybox-container .btn_more a {
  display: block;
  color: red;
  background: #FFF;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
/*============================
recruit
============================*/
#recruit {
  background: #306163;
  color: #FFF;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
  position: relative;
}
#recruit.fx::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  height: 100%;
  background: #306163;
  z-index: 9999;
  width: 50%;
}
#recruit.fx.stomp::after {
  opacity: 1;
  animation: wall 0.7s forwards;
  animation-delay: 0.2s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
@keyframes wall {
 0% {
 width: 50%;
}
 100% {
 width: 0;
}
}
#recruit h2 {
  width: 261px;
  padding-top: 46px;
  background-image: url(../images/home/recruit/title.svg);
  margin-bottom: 40px;
}
#recruit .photo {
  background-image: url(../images/home/recruit/dot.png), url(../images/home/recruit/photo.jpg);
  background-repeat: repeat, repeat;
  background-size: 2px 2px, cover;
}
#recruit .photo .none {
  display: none;
}
#recruit .lead p {
  padding-bottom: 5px;
}
/*============================
company
============================*/
#company {
  background: #533b70;
  color: #FFF;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
#company.fx::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  background: #533b70;
  z-index: 9999;
  width: 50%;
}
#company.fx.stomp::after {
  opacity: 1;
  animation: wall 0.7s forwards;
  animation-delay: 0.2s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
@keyframes wall {
 0% {
 width: 50%;
}
 100% {
 width: 0;
}
}
#company h2 {
  width: 267px;
  padding-top: 34px;
  background-image: url(../images/home/company/title.svg);
  margin-bottom: 40px;
}
#company .lead {
}
#company .lead a {
  color: #FFF;
}
#company .lead .name {
  padding-bottom: 10px;
}
#company .lead .address {
  padding-bottom: 10px;
}
#company .lead ul {
  overflow: hidden;
}
#company .lead ul li {
  float: left;
  margin-right: 19px;
}
#company .lead .toTel a {
  padding-left: 14px;
  background: url(../images/common/icon_tel01.svg) no-repeat top 6px left;
  background-size: 9px 19px;
  font-size: 18px;
  display: block;
}
#company .toContact {
  padding-top: 2px;
}
#company .toAccess {
  padding-top: 2px;
}
#company .map {
  height: auto;
}

@media only screen and (max-width: 768px) {
.primary > article {
  padding: 30px 0 40px;
}
h2 {
}
.link {
  padding-top: 20px;
}
.link a {
  width: 100%;
}
.link a span {
  padding: 13px 14px 13px 0;
}
.link a:after {
}
/*============================
contents
============================*/
.primary .inner {
  width: 100%;
}
.top_img {
}
.top_img p {
}
.top_img .inner {
  width: 100%;
  padding: 0 0;
  top: 0;
  left: 0;
  margin-left: 0;
}
.top_img h1 {
  width: 80%;
  position: absolute;
  margin-top: 0;
  margin-left: 0;
  top: 50%;
  left: 50%;
  z-index: 9999;
  margin: -20% 0 0 -40%;
  padding-top: 0;
}
.top_img h1 strong {
  display: block;
  width: 80%;
  padding-top: 23.6%;
  height: 0;
  overflow: hidden;
  background: url(../images/common/logo/02.svg) no-repeat left top;
  background-size: 100%;
  margin: 0 auto 0 auto;
  opacity: 0;
}
.top_img h1 span.eng {
  font-size: 4vw;
  padding: 15px 0 0 0;
  margin: 12px 0 0 0;
  text-align: center;
}
.top_img h1 span.ja {
  font-size: 3vw;
  text-align: center;
}
.load .top_img h1::before, .load .top_img h1::after {
  bottom: 40%;
}
.key_slider li.img04 {
  background-position: bottom left -30px;
}
a.scroll {
  padding-top: 40px;
}
a.scroll span {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  background: rgba(0, 0, 0, 0.1);
}
a.scroll span::before {
  width: 60px;
  height: 60px;
}
@-webkit-keyframes sdb {
 0% {
 opacity: 0;
}
 30% {
 opacity: 1;
}
 60% {
 box-shadow: 0 0 0 30px rgba(255,255,255,.1);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@keyframes sdb {
 0% {
 opacity: 0;
}
 30% {
 opacity: 1;
}
 60% {
 box-shadow: 0 0 0 30px rgba(255,255,255,.1);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
.icon_scroll {
  width: 40%;
  margin: 14px auto 0 auto;
}
#news {
  padding: 55px 0 70px 0;
}
#news h2 {
  top: -20px;
}
#news .news_list li {
  width: 100% !important;
}
#news .news_list .slick-arrow {
  width: 35px;
}
#news .news_list .slick-arrow.slick-prev {
  left: -8px;
}
#news .news_list .slick-arrow.slick-next {
  right: -8px;
}
.fancybox-navigation .fancybox-button--arrow_left {
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  top: calc(100% - 71px);
}
.fancybox-navigation .fancybox-button--arrow_right {
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  top: calc(100% - 71px);
}
#news .news_list {
  padding: 30px 20px 25px 20px;
}
#news .news_list li.news_info {
  background-image: none;
}

/*============================
information
============================*/
#information {
  padding: 30px 0 0 0;
}
#information h2 {
  top: -40px;
}
#information .information_list li h3 {
  float: none;
  font-size: 12px;
  line-height: 1.5em;
}
#information .information_list li .date {
  float: none;
  font-size: 12px;
  border: none;
}
#information .information_list::before, #information .information_list::after {
  display: none;
}

.info_more {padding: 0 20px;margin: 0 0 0 0;border: 1px solid rgba(255, 208, 0, 0.5);border-radius: 1px;width: auto;font-size: 12px;right: 0;bottom: -36px;height: 25px;line-height: 21px;}
.info_more:hover::before {
  content: none;
}
.info_more::after {
    content: none;
}

#service {
  padding-top: 50px;
}
#service h2, #works h2, #recruit h2, #company h2 {
  width: 100%;
  padding-top: 10%;
  background-size: 50%;
  background-position: center;
  margin-bottom: 27px;
}
#service ul li {
  width: 100%;
}
#service ul li a {
  height: auto;
  padding: 20% 0;
}
#works .text, #works .photo, #recruit .text, #recruit .photo, #company .text, #company .map {
  width: 100%;
  padding: 0;
  position: static;
}
#company .map {
  height: 300px;
}
#works {
  flex-direction: column-reverse;
}
#works h2 {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 0;
  padding-top: 7%;
  background-size: 40%;
}
#works .photo {
  padding: 105px 0 0 0;
}
#works .bwWrapper {
  padding: 0 4% 0 4%;
}
#works .bwWrapper li {
  width: 31%;
  height: 107px;
  margin-bottom: 3.5%;
  position: relative;
}
#works .text {
  padding: 30px 8% 50px 8%;
}
#works h3, #recruit h3 {
  margin-bottom: 10px;
}
#recruit {
  flex-direction: column-reverse;
  padding-top: 107px;
}
#recruit h2 {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 0;
  padding-top: 10%;
  background-size: 53%;
}
#recruit .text {
  padding: 30px 8% 50px 8%;
}
#recruit .photo {
  width: 92%;
  height: 220px;
  margin: auto;
  background-position: center;
}
#company .text {
  padding: 40px 8% 50px 8%;
}
#company h2 {
  margin-bottom: 20px;
  padding-top: 10%;
  background-size: 64%;
}
#company .lead .name {
  padding-bottom: 8px;
}
#company .lead .address {
  padding-bottom: 14px;
}
#company .lead ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#company .lead ul li {
  float: none;
  width: 50px;
  height: auto;
  background: none;
  padding: 0;
  margin: 0 8px;
}
#company .lead ul li a, #company .lead .toTel a {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.13);
  margin: 0;
  padding: 0;
  border-radius: 40px;
  height: 0;
  padding-top: 50px;
  overflow: hidden;
  background-image: url(../images/common/icon_tel02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26%;
}
#company .lead .toContact a {
  background-image: url(../images/common/icon_mail02.svg);
  background-size: 46%;
}
#company .lead .toAccess a {
  background-image: url(../images/common/icon_pin01.svg);
  background-size: 36%;
}
#works.fx::after, #recruit.fx::after, #company.fx::after {
  content: none;
}
#works .bwWrapper.fx, #recruit .photo.fx, #company .lead.fx {
  position: relative;
}
#works .bwWrapper.fx::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 101%;
  background: #304363;
  z-index: 9999;
  width: 100%;
}
#works .bwWrapper.fx.stomp::after {
  opacity: 1;
  animation: wall 0.7s forwards;
  animation-delay: 0.2s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
@keyframes wall {
 0% {
 width: 50%;
}
 100% {
 width: 0;
}
}
#recruit .photo.fx::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  height: 101%;
  background: #306163;
  z-index: 9999;
  width: 100%;
}
#recruit .photo.fx.stomp::after {
  opacity: 1;
  animation: wall 0.7s forwards;
  animation-delay: 0.2s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
@keyframes wall {
 0% {
 width: 50%;
}
 100% {
 width: 0;
}
}
#company .text.fx::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #533b70;
  z-index: 9999;
  width: 100%;
}
#company .text.fx.stomp::after {
  opacity: 1;
  animation: wall 0.7s forwards;
  animation-delay: 0.2s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
@keyframes wall {
 0% {
 width: 50%;
}
 100% {
 width: 0;
}
}
}