@charset "UTF-8";

/*
======== CONTENTS ==========================================
	RECRUIT - CAREER
  Top
============================================================
*/

/* - mv
---------------------------------- */
#cr-topMv {
  width: 100%;
  /* aspect-ratio: 1440/1000; */
  height: min(calc(1000 / 965 * 100vw), 1000px);
  position: relative;
  overflow: hidden;
}

#cr-topMv .cr-topMv_cover {
  display: block;
  width: 100%;
  height: 100%;
  background: #d61518;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
}

@media screen and (max-width: 768px) {
  #cr-topMv {
    width: 100%;
    height: auto;
    aspect-ratio: 375/482;
  }
}

#cr-topMv .cr-topMv_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#Contents #cr-topMv .cr-topMv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cr-topMv .cr-topMv_container-text {
  width: min(100%, 1065px);
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

#cr-topMv .cr-topMv_text-1 {
  color: #fff;
  font-size: min(calc(58 / 965 * 100vw), 58px);
  line-height: 1.5;
  padding: calc(100 / 965 * 100%) 0 0 0;
  margin: 0 0 calc(35 / 965 * 100%) calc(8 / 965 * 100%);
}

#cr-topMv .cr-topMv_text-2 {
  color: #fff;
  font-size: min(calc(16 / 965 * 100vw), 16px);
  line-height: 1.8;
  margin: 0 0 0 calc(8 / 965 * 100%);
}

@media screen and (max-width: 768px) {
  #cr-topMv .cr-topMv_container-text {
    padding: 0 0;
  }

  #cr-topMv .cr-topMv_text-1 {
    font-size: calc(26 / 375 * 100vw);
    text-align: center;
    padding: calc(45 / 375 * 100%) 0 0 0;
    margin: 0 auto calc(40 / 375 * 100%) auto;
  }

  #cr-topMv .cr-topMv_text-2 {
    font-size: calc(14 / 375 * 100vw);
    text-align: center;
    margin: 0 auto;
  }
}

/* #cr-topMv .cr-topMv_t {
  width: 144px;
  height: 100px;
  position: absolute;
  top: 200px;
  left: 200px;
  background: gray;
  z-index: 10;
} */

#cr-topMv .cr-topMv_layer-1 {
  width: 100%;
  height: 200%;
  background: #d61518;
  transform-origin: top left;
  transform: skewY(35deg);
  position: absolute;
  /* top: -100%; */
  /* top: 60%; */
  top: var(--top);
  left: 0;
  overflow: hidden;
  z-index: 4;
}

#cr-topMv .cr-topMv_layer-1 > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
  position: absolute;
  top: 0;
}

#cr-topMv .cr-topMv_layer-2,
#cr-topMv .cr-topMv_layer-2-2 {
  width: 100%;
  height: 300%;
  transform-origin: bottom left;
  transform: skewY(-45deg);
  position: absolute;
  /* bottom: -150%; */
  /* bottom: -25%; */
  bottom: var(--bottom);
  left: 0;
  overflow: hidden;
}

#cr-topMv .cr-topMv_layer-2 {
  background: rgba(94, 78, 35, 0.8);
  mix-blend-mode: multiply;
  z-index: 2;
}

#cr-topMv .cr-topMv_layer-2-2 {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
  z-index: 3;
}

#cr-topMv .cr-topMv_copy {
  width: min(calc(124 / 965 * 100vw), 124px);
  aspect-ratio: 124/105;
  background: url('/recruit/career/shared/images/common/text_career_02.png') no-repeat center center / contain;
  position: absolute;
  top: 76.5%;
  left: min(calc(152 / 965 * 100vw), 152px);
  z-index: 6;
}

@media screen and (max-width: 768px) {
  /* #cr-topMv .cr-topMv_t {
    width: calc(375px / 2);
    height: calc(482px / 2);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: gray;
    z-index: 10;
  } */

  #cr-topMv .cr-topMv_copy {
    width: calc(95 / 375 * 100vw);
    top: 78%;
    left: calc(68 / 375 * 100vw);
  }
}

/* - project - sectionA
---------------------------------- */
.cr-p-sectionA {
  background: #fff;
  padding: 30px calc(30 / 670 * 100%);
  margin: 30px 0 0 0;
}

.cr-p-sectionA .cr-p-sectionA_title {
  font-size: min(calc(28 / 965 * 100vw), 28px);
  line-height: 1.5;
}

.cr-p-sectionA .cr-p-sectionA_text {
  font-size: min(calc(16 / 965 * 100vw), 16px);
  line-height: 1.8;
  margin: 20px 0 0 0;
}

.cr-p-sectionA .cr-p-sectionA_container {
  margin: 30px 0 0 0;
}

@media screen and (max-width: 768px) {
  .cr-p-sectionA {
    padding: 30px 0 30px 0;
    margin: 30px 0 0 0;
  }

  .cr-p-sectionA .cr-p-sectionA_title {
    font-size: calc(18 / 375 * 100vw);
    text-align: center;
    width: calc(340 / 375 * 100%);
    margin: 0 auto;
  }

  .cr-p-sectionA .cr-p-sectionA_text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 2;
    width: calc(340 / 375 * 100%);
    margin: 20px auto 0 auto;
  }

  .cr-p-sectionA .cr-p-sectionA_container {
    width: calc(340 / 375 * 100%);
    margin: 30px auto 0 auto;
  }
}

/* - project - panelA
---------------------------------- */
.cr-p-panelA_wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px 0;
}

.cr-p-panelA_wrap > li {
  width: calc(290 / 610 * 100%);
}

@media screen and (max-width: 768px) {
  .cr-p-panelA_wrap {
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px 0;
  }

  .cr-p-panelA_wrap > li {
    width: 100%;
  }
}

.cr-p-panelA {
  text-align: center;
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(230, 0, 18, 1) 0%, rgba(114, 0, 9, 1) 100%);
  position: relative;
}

.cr-p-panelA * {
  color: #fff;
}

.cr-p-panelA .cr-p-panelA_thumb {
  display: block;
  width: 100%;
  aspect-ratio: 290/200;
  overflow: hidden;
}

.cr-p-panelA .cr-p-panelA_container-text {
  flex: 1 1 0;
  width: 100%;
  padding: 0 0 45px 0;
  position: relative;
}

.cr-p-panelA .cr-p-panelA_title {
  font-size: min(calc(18 / 965 * 100vw), 18px);
  line-height: 1.5;
  padding: 12px 0;
  margin: 0 0 12px 0;
  position: relative;
}

.cr-p-panelA .cr-p-panelA_title:after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}

.cr-p-panelA .cr-p-panelA_text {
  font-size: min(calc(14 / 965 * 100vw), 14px);
  line-height: 1.8;
}

/* icon */
.cr-p-panelA:not([target='_blank']) .cr-p-panelA_container-text:after {
  content: '';
  display: block;
  width: 9px;
  aspect-ratio: 1/1;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;
  rotate: 45deg;
}

.cr-p-panelA[target='_blank'] .cr-p-panelA_container-text:after {
  content: '';
  display: block;
  width: 12px;
  aspect-ratio: 1/1;
  background: url('/recruit/career/shared/images/common/icon_blank_01_w.png') no-repeat center center / contain;
  position: absolute;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;
}

@media (any-hover: hover) {
  .cr-p-panelA .cr-p-panelA_thumb img {
    transition: all 300ms;
  }

  .cr-p-panelA:hover .cr-p-panelA_thumb img {
    scale: 1.15;
  }
}

@media screen and (max-width: 768px) {
  .cr-p-panelA {
    display: block;
    height: auto;
  }

  .cr-p-panelA .cr-p-panelA_thumb {
    aspect-ratio: 320/150;
  }

  .cr-p-panelA .cr-p-panelA_container-text {
    padding: 0 0 15px 0;
  }

  .cr-p-panelA .cr-p-panelA_title {
    font-size: calc(13 / 375 * 100vw);
    padding: 1em 0;
    margin: 0 0 1em 0;
  }

  .cr-p-panelA .cr-p-panelA_title:after {
    width: 30px;
  }

  .cr-p-panelA .cr-p-panelA_text {
    font-size: calc(11 / 375 * 100vw);
    line-height: 1.6;
  }

  /* icon */
  .cr-p-panelA:not([target='_blank']) .cr-p-panelA_container-text:after {
    width: calc(9 / 375 * 100vw);
    bottom: auto;
    left: auto;
    top: 14px;
    right: calc(12 / 320 * 100%);
    translate: 0 0;
  }

  .cr-p-panelA[target='_blank'] .cr-p-panelA_container-text:after {
    width: calc(12 / 375 * 100vw);
    bottom: auto;
    left: auto;
    top: 12px;
    right: calc(12 / 320 * 100%);
    translate: 0 0;
  }
}

/* - project - panelB
---------------------------------- */
.cr-p-panelB {
  display: flex;
  align-items: stretch;
  background: #fff;
  margin: 30px 0 0 0;
  position: relative;
}

.cr-p-panelB .cr-p-panelB_thumb {
  order: 2;
  width: calc(330 / 670 * 100%);
  overflow: hidden;
}

.cr-p-panelB .cr-p-panelB_container {
  order: 1;
  width: calc(340 / 670 * 100%);
  padding: 30px calc(20 / 670 * 100%) 30px calc(30 / 670 * 100%);
}

.cr-p-panelB .cr-p-panelB_title {
  font-size: min(calc(28 / 965 * 100vw), 28px);
  line-height: 1.5;
}

.cr-p-panelB .cr-p-panelB_subtitle {
  font-size: min(calc(20 / 965 * 100vw), 20px);
  display: block;
  font-style: normal;
}

.cr-p-panelB .cr-p-panelB_text {
  font-size: min(calc(14 / 965 * 100vw), 14px);
  line-height: 1.8;
  margin: 20px 0 0 0;
}

.cr-p-panelB .cr-p-panelB_btn {
  font-size: min(calc(16 / 965 * 100vw), 16px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, rgba(230, 0, 18, 1) 0%, rgba(114, 0, 9, 1) 100%);
  margin: 30px 0 0 0;
  position: relative;
}

.cr-p-panelB .cr-p-panelB_btn {
  color: #fff;
}

/* icon */
.cr-p-panelB .cr-p-panelB_btn:not([target='_blank']):after {
  content: '';
  display: block;
  width: 9px;
  aspect-ratio: 1/1;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  top: 50%;
  right: calc(20 / 280 * 100%);
  translate: 0 -50%;
  rotate: 45deg;
}

.cr-p-panelB .cr-p-panelB_btn[target='_blank']:after {
  content: '';
  display: block;
  width: 12px;
  aspect-ratio: 1/1;
  background: url('/recruit/career/shared/images/common/icon_blank_01_w.png') no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: calc(20 / 280 * 100%);
  translate: 0 -50%;
}

@media (any-hover: hover) {
  .cr-p-panelB .cr-p-panelB_btn {
    transition: all 300ms;
  }

  .cr-p-panelB .cr-p-panelB_btn:hover {
    opacity: 0.6;
  }
}

@media screen and (max-width: 768px) {
  .cr-p-panelB {
    display: block;
    width: calc(340 / 375 * 100%);
    margin: 30px auto 0 auto;
  }

  .cr-p-panelB .cr-p-panelB_thumb {
    width: 100%;
    aspect-ratio: 320/180;
  }

  .cr-p-panelB .cr-p-panelB_container {
    width: 100%;
    padding: 20px min(calc(20 / 340 * 100%), 20px) 20px calc(20 / 340 * 100%);
  }

  .cr-p-panelB .cr-p-panelB_title {
    font-size: calc(18 / 375 * 100vw);
    text-align: center;
  }
  
  .cr-p-panelB .cr-p-panelB_subtitle {
    font-size: calc(14 / 375 * 100vw);
  }

  .cr-p-panelB .cr-p-panelB_text {
    font-size: calc(11 / 375 * 100vw);
    line-height: 1.6;
    text-align: center;
    margin: 12px 0 0 0;
  }

  .cr-p-panelB .cr-p-panelB_btn {
    font-size: calc(16 / 375 * 100vw);
    height: calc(40 / 375 * 100vw);
    margin: 15px 0 0 0;
  }

  /* icon */
  .cr-p-panelB .cr-p-panelB_btn:not([target='_blank']):after {
    width: calc(9 / 375 * 100vw);
    right: calc(20 / 300 * 100%);
  }

  .cr-p-panelB .cr-p-panelB_btn[target='_blank']:after {
    width: calc(12 / 375 * 100vw);
    right: calc(20 / 300 * 100%);
  }
}