@charset "utf-8";





.main_box {

  background-image: url(../images/top/bg.jpg);

  background-size: contain;

  background-position: center top;

  background-repeat: no-repeat;

}



@media screen and (max-width: 767px) {

  #main_box {

    padding-right: 0;

    padding-left: 0;

  }

}



/* title ----------------- */



#title {

}



#title .title_inner {

  position: relative;

  padding-top: calc(506 / 1550 * 100%); /* 586 */

}

#title .title_inner > h2 {

  position: absolute;

  top: calc(260 / 586 * 100%);

  left: calc(((1550 - 1190) / 2 ) / 1550 * 100%);

  width: calc(276 / 1550 * 100%);

  height: calc(98 / 586 * 100%);

  background-image: url(../images/top/title_text.svg);

}

html[lang="en"] #title .title_inner > h2 {

  position: absolute;

  width: calc(400 / 1550 * 100%);

  height: calc(98 / 586 * 100%);

  background-image: url(../images/top/en_title_text.svg);

}

@media screen and (max-width: 1550px) {

  #title .title_inner > h2 {

    left: calc(50vw - 595px);

  }

}

@media screen and (max-width: 1254px) {

  #title .title_inner > h2 {

    left: calc(32 / 1254 * 100%);

  }

}

@media screen and (max-width:767px) {

  #title .title_inner {

    background-color: rgba(255,255,255,0.4);

  }

  #title .title_inner > h2 {

    width: calc(278 / 750 * 100%);

    height: calc(99 / 284 * 100%);

    top: 40%;

  }

  html[lang="en"] #title .title_inner > h2 {

    width: calc(400 / 750 * 100%);

    height: calc(98 / 284 * 100%);

  }

}





/* ---- box01 ---- */

.box01 {

}



.box01 .navi_box01,

.box01 .navi_box02 {

  display: flex;

  justify-content: space-between;

}

.box01 .navi_box01 > li {

  width: calc(389 / 1190 * 100%);

  position: relative;

  /* top: 100px;

  opacity: 0;*/

}

._csstrans .box01 .navi_box01 > li:nth-child(1) {

  transition: top .6s cubic-bezier(.165, .84, .44, 1),

          opacity .6s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box01 > li:nth-child(2) {

  transition: top .6s .2s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .2s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box01 > li:nth-child(3) {

  transition: top .6s .4s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .4s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box01 > li:nth-child(4) {

  transition: top .6s .6s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .6s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box01 > li:nth-child(5) {

  transition: top .6s .8s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .8s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box01 > li:nth-child(6) {

  transition: top .6s 1s cubic-bezier(.165, .84, .44, 1),

          opacity .6s 1s cubic-bezier(.165, .84, .44, 1);

}

.box01 .navi_box01._start > li {

  top: 0;

  opacity: 1;

}



.box01 .navi_box01 > li > a {

  display: block;

  position: relative;

  width: 100%;

  padding-top: calc(267 / 389 * 100%);

  background-color: rgb(255,255,255);

  background-position: center top;

  background-repeat: no-repeat;

  background-size: cover;

}

.box01 .navi_box01 > li > a::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-position: center top;

  background-repeat: no-repeat;

  background-size: cover;

  content: '';

  opacity: 1;

}

._csstrans .box01 .navi_box01 > li > a::before {

  transition: opacity .4s cubic-bezier(.165, .84, .44, 1);

}

.box01 .navi_box01 > li > a:hover::before {

  opacity: .7;

}

.box01 .navi_box01 > li > a > span {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 50px;

  padding-right: 3.3em;

  background-color: rgba(0,0,0,.5);

  text-align: center;

  color: rgb(255,255,255);

  font-size: 20px;

  line-height: 1.2;

}

._csstrans .box01 .navi_box01 > li > a > span {

  transition: background-color .4s cubic-bezier(.165, .84, .44, 1);

}

.box01 .navi_box01 > li > a:hover > span {

  background-color: rgba(0,0,0,.8);

}



.box01 .navi_box01 > li > a > span::after {

  display: block;

  position: absolute;

  top: 50%;

  right: 1.1em;

  width: 16px;

  height: calc(20 / 50 * 100%);

  background-image: url(../../common/images/arrow_right_w.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

  transform: translate3d(0, -50%, 0);

  content: '';

}



@media screen and (max-width:1254px) {

  .box01 .navi_box01 > li > a > span {

    height: calc(2.4691vw + 19.037px); /* 50 -> 38 */

    font-size: calc(1.2346vw + 4.5185px); /* 20 -> 14 */

  }

}

@media screen and (max-width:767px) {

  .box01 .navi_box01 {

    flex-wrap: wrap;

    padding: 0 16px;

  }

  .box01 .navi_box01 > li {

    width: 100%;

    margin-bottom: 16px;

  }

  .box01 .navi_box01 > li > a > span {

    height: 50px;

    font-size: 18px;

  }

}





.box01 .title_box {

  display: flex;

  justify-content: center;

}

.box01 .title_box > span {

  display: block;

  position: relative;

  padding-top: 30px;

  padding-left: 100px;

  height: 81px;

  font-size: 30px;

  line-height: 1;

  color: rgb(114,113,113);

  font-weight: 700;

}

.box01 .title_box > span::before {

  display: block;

  position: absolute;

  left: 0;

  top: 0;

  width: 80px;

  height: 81px;

  background-image: url(../images/top/icon_corporate.svg);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  content: '';

}

@media screen and (max-width:767px) {

  .box01 .title_box > span {

    height: 61px;

    padding-top: 22px;

    padding-left: 75px;

    padding-right: 16px;

    font-size: 20px;

  }

  .box01 .title_box > span::before {

    width: 60px;

    height: 61px;

  }

}







.box01 .navi_box02 {

  flex-wrap: wrap;

}

.box01 .navi_box02 > li {

  position: relative;

  width: calc((100% - 10px) / 3);

  margin-bottom: 5px;

  padding-top: calc(206 / 1190 * 100%);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

  top: 100px;

  opacity: 0;

}

._csstrans .box01 .navi_box02 > li:nth-child(1) {

  transition: top .6s cubic-bezier(.165, .84, .44, 1),

          opacity .6s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(2) {

  transition: top .6s .2s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .2s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(3) {

  transition: top .6s .4s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .4s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(4) {

  transition: top .6s .6s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .6s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(5) {

  transition: top .6s .8s cubic-bezier(.165, .84, .44, 1),

          opacity .6s .8s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(6) {

  transition: top .6s 1s cubic-bezier(.165, .84, .44, 1),

          opacity .6s 1s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(7) {

  transition: top .6s 1.2s cubic-bezier(.165, .84, .44, 1),

          opacity .6s 1.2s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(8) {

  transition: top .6s 1.4s cubic-bezier(.165, .84, .44, 1),

          opacity .6s 1.4s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .box01 .navi_box02 > li:nth-child(9) {

  transition: top .6s 1.6s cubic-bezier(.165, .84, .44, 1),

          opacity .6s 1.6s cubic-bezier(.165, .84, .44, 1);

}

.box01 .navi_box02._start > li {

  top: 0;

  opacity: 1;

}





.box01 .navi_box02 > li > .item {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,12,24,0.28);

}

._csstrans .box01 .navi_box02 > li > a.item {

  transition: background-color .6s cubic-bezier(.165, .84, .44, 1);

}

.box01 .navi_box02 > li > a.item:hover {

  background-color: rgba(0,12,24,0.66);

}

.box01 .navi_box02 > li > .item > span {

  display: block;

  position: absolute;

  bottom: 0;

  right: 0;

  padding-top: 19px;

  padding-right: 48px;

  padding-bottom: 19px;

  line-height: 1.2;

  font-size: 20px;

  color: rgb(255,255,255);

  text-align: right;

}

.box01 .navi_box02 > li > .item > span::after {

  display: block;

  position: absolute;

  top: 50%;

  right: 20px;

  width: 15.4px;

  height: 20px;

  background-image: url(../../common/images/arrow_right_w.svg);

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(0, -50%, 0);

  content: '';

}



.box01 .navi_box02 > li > .item > span.note {

  bottom: -24px;

  font-size: 11px;

  padding-top: 0;

  padding-bottom: 4px;

  padding-right: 0;

  color: rgb(33,33,33);

}

.box01 .navi_box02 > li > .item > span.note::after {

  display: none;

}



@media screen and (max-width:1254px) {

  .box01 .navi_box02 > li > .item > span {

    padding-right: calc(2.0576vw + 22.1975px); /* 48 -> 38 */

    font-size: calc(1.2346vw + 4.5185px); /* 20 -> 14 */

  }

  .box01 .navi_box02 > li > .item > span::after {

    right: calc(2.0576vw - 5.8025px); /* 20 -> 10 */

    height: calc(1.2346vw + 4.5185px); /* 20 -> 14 */

  }

}





@media screen and (max-width:800px) {

  .box01 .navi_box02 > li > .item > span.note {

    font-size: 10px;

  }

}



@media screen and (max-width:767px) {

  .box01 .navi_box02 {

  }

  .box01 .navi_box02 > li {

    width: calc((100% - 6px) / 2);

    padding-top: calc(92 / 356 * 100%);

  }

  .box01 .navi_box02 > li > .item > span {

    padding-top: 9px;

    padding-right: 24px;

    padding-bottom: 9px;

    font-size: 12px;

  }

  .box01 .navi_box02 > li > .item > span::after {

    right: 8px;

    width: 11px;

    height: 12px;

  }

  .box01 .navi_box02 > li > .item > span._lt1 {

    letter-spacing: -.5px;

  }

  

  .box01 .navi_box02 > li > .item > span.note {

    bottom: -32px;

    padding-left: 1em;

    text-indent: -1em;

  }

}



.box01 .navi_box01 .co_in_01_01 a::before {background-image: url(../images/top/img01_01.jpg?ud=240605);}

.box01 .navi_box01 .co_in_01_02 a::before {background-image: url(../images/top/img01_02.jpg);}

.box01 .navi_box01 .co_in_01_03 a::before {background-image: url(../images/top/img01_03.jpg);}



.box01 .navi_box02 .co_in_02_01 {background-image: url(../images/top/img02_01.jpg);}

.box01 .navi_box02 .co_in_02_02 {background-image: url(../images/top/img02_02.jpg);}

.box01 .navi_box02 .co_in_02_03 {background-image: url(../images/top/img02_03.jpg);}

.box01 .navi_box02 .co_in_02_04 {background-image: url(../images/top/img02_04.jpg);}

.box01 .navi_box02 .co_in_02_05 {background-image: url(../images/top/img02_05.jpg);}

.box01 .navi_box02 .co_in_02_06 {background-image: url(../images/top/img02_06.jpg);}

.box01 .navi_box02 .co_in_02_07 {background-image: url(../images/top/img02_07.jpg);}

.box01 .navi_box02 .co_in_02_08 {background-image: url(../images/top/img02_08.jpg);}

.box01 .navi_box02 .co_in_02_09 {background-image: url(../images/top/img02_09.jpg);}





/* ---- box02 ---- */

.box02 {

  padding-top: 90px;

  padding-bottom: 80px;

  background-color: rgb(230,230,230);

}

.box02 .ttl_m {

  color: rgb(89,87,87);

}

.news_box.date_list_box .date_list_box_i {

    padding-top: calc(32 / 1254 * 100%);

}







.box02 .recruit_box > ul {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  padding-top: calc(28 / 1190 * 100%);

  padding-right: calc(23 / 1190 * 100%);

  padding-bottom: calc(13 / 1190 * 100%);

  padding-left: calc(597 / 1190 * 100%);

  background-image: url(../images/top/img_recruit.jpg?ud=211216);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: left top;

}

.box02 .recruit_box > ul > li {

  width: calc((100% - 10px) / 2);

  margin-bottom: 10px;

}

.box02 .recruit_box > ul > li:first-child {

  width: 100%;

}

.box02 .recruit_box > ul > li > a {

  display: block;

  width: 100%;

  position: relative;

  padding-top: calc(160 / 280 * 100%);

  background-color: rgb(255,255,255);

}

.box02 .recruit_box > ul > li:first-child > a {

  padding-top: calc(160 / 570 * 100%);

}

.box02 .recruit_box > ul > li > a::before {

  display: block;

  left: 50%;

  transform: translate3d(-50%, -50%, 0);

  position: absolute;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  content: '';

}

.box02 .recruit_box > ul > li > a.dydo::before {

  top: 50%;

  width: calc(98 / 570 * 100%);

  height: calc(37 / 160 * 100%);

  background-image: url(../../common/images/logo_dydo.svg);

}

.box02 .recruit_box > ul > li > a.daido::before {

  top: 48%;

  width: calc(110 / 280 * 100%);

  height: calc(35 / 160 * 100%);

  background-image: url(../../common/images/logo_daido.svg);

}

.box02 .recruit_box > ul > li > a.tarami::before {

  top: 43%;

  width: calc(104 / 280 * 100%);

  height: calc(53 / 160 * 100%);

  background-image: url(../../common/images/logo_tarami.svg);

}

.box02 .recruit_box > ul > li > a > span {

  display: block;

  width: 100%;

  position: absolute;

  top: calc(123 / 160 * 100%);

  text-decoration: underline;

  font-size: 13.4px;

  line-height: 1.3;

  text-align: center;

}





._u980 {

  display: none;

}

@media screen and (max-width:980px) {

  ._u980 {

    display: block;

  }

  .box02 .recruit_box > ul > li > a > span {

    top: 68%;

  }

  .box02 .recruit_box > ul > li > a.dbv > span {

    top: 59%;

  }

  .box02 .recruit_box > ul > li > a.dydo::before {

    top: 45%;

  }

  .box02 .recruit_box > ul > li > a.daido::before {

    top: 44%;

  }

  .box02 .recruit_box > ul > li > a.tarami::before {

    top: 38%;

  }

  

}



@media screen and (max-width:767px) {

  .box02 {

    padding-top: 45px;

  }

  .box02 .recruit_box > ul {

    padding: 0;

    background-image: none;

  }

}