.p-job-movie{
  --jm-width:600px;
  margin-bottom:40px
}
.p-job-movie__wrap{
  position:relative;
  max-width:var(--jm-width);
  margin:0 auto;
}
.p-job-movie__deco{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
}
.p-job-movie__deco-corner{
  position:absolute;
  display:block;
}
.p-job-movie__deco-corner._tl::before,
.p-job-movie__deco-corner._tl::after{
  position:absolute;
  background:#194c77;
  content:"";
}
.p-job-movie__deco-corner._tl{
  top:-10px;
  left:-10px;
}
.p-job-movie__deco-corner._tl::before{
  width:105px;
  height:10px;
}
.p-job-movie__deco-corner._tl::after{
  width:10px;
  height:65px;
}
.p-job-movie__deco-corner._br::before,
.p-job-movie__deco-corner._br::after{
  position:absolute;
  background:radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px) 0 0 / 4px 4px, #1f6f9a;
  content:"";
}
.p-job-movie__deco-corner._br{
  right:-10px;
  bottom:-10px;
}
.p-job-movie__deco-corner._br::before{
  right:0;
  bottom:0;
  width:105px;
  height:10px;
}
.p-job-movie__deco-corner._br::after{
  right:0;
  bottom:0;
  width:10px;
  height:65px;
}
.p-job-movie__thumb{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  background-color:#000;
  border:none;
  border-radius:4px;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  cursor:pointer;
}
.p-job-movie__thumb img{
  display:block;
  width:100%;
  height:auto;
  -webkit-transition:-webkit-transform 0.4s ease;
  transition:-webkit-transform 0.4s ease;
  transition:transform 0.4s ease;
  transition:transform 0.4s ease, -webkit-transform 0.4s ease;
}
.p-job-movie__thumb::after{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.2);
  content:"";
  pointer-events:none;
}
.p-job-movie__thumb:hover img{
  -webkit-transform:scale(1.03);
          transform:scale(1.03);
}
.p-job-movie__play{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  width:64px;
  height:64px;
  background-color:rgba(0, 0, 0, 0.55);
  border-radius:50%;
  -webkit-transform:translate(-50%, -50%);
          transform:translate(-50%, -50%);
  -webkit-transition:background-color 0.3s ease;
  transition:background-color 0.3s ease;
  pointer-events:none
}
.p-job-movie__thumb:hover .p-job-movie__play{
  background-color:#1a4e76;
}
.p-job-movie__play::before{
  position:absolute;
  top:50%;
  left:54%;
  width:0;
  height:0;
  border-width:11px 0 11px 18px;
  border-style:solid;
  border-color:transparent transparent transparent #fff;
  -webkit-transform:translate(-50%, -50%);
          transform:translate(-50%, -50%);
  content:""
}
.p-job-movie__label{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  display:block;
  margin-top:48px;
  font-size:1.2rem;
  font-weight:700;
  color:#fff;
  letter-spacing:0.2em;
  text-shadow:0 1px 4px rgba(0, 0, 0, 0.5);
  -webkit-transform:translate(-50%, 0);
          transform:translate(-50%, 0);
  pointer-events:none
}
.p-job-movie__caption{
  max-width:var(--jm-width);
  margin:0 auto;
  padding-top:16px
}
.p-job-movie__caption-title{
  margin:0 0 6px;
  font-size:1.6rem;
  font-weight:700
}
.p-job-movie__caption-text{
  margin:0;
  font-size:1.4rem
}
.job-movie-modal{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  width:100%;
  height:100%;
  -webkit-transition:opacity 0.3s ease;
  transition:opacity 0.3s ease;
}
.job-movie-modal__bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.8);
  cursor:pointer;
}
.job-movie-modal__wrapper{
  position:absolute;
  top:50%;
  left:50%;
  width:92%;
  max-width:960px;
  -webkit-transform:translate(-50%, -50%);
          transform:translate(-50%, -50%);
}
.job-movie-modal__inner{
  position:relative;
}
.job-movie-modal__video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  background-color:#000;
}
.job-movie-modal__close{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  display:block;
  width:40px;
  height:40px;
  padding:0;
  background-color:rgba(0, 0, 0, 0.5);
  border:none;
  border-radius:50%;
  outline:none;
  cursor:pointer;
  -webkit-transition:background-color 0.3s ease;
  transition:background-color 0.3s ease;
}
.job-movie-modal__close:hover{
  background-color:rgba(0, 0, 0, 0.8);
}
.p-job-movie__thumb.focus-visible,
.job-movie-modal__close.focus-visible{
  outline:2px solid #4a90d9;
  outline-offset:2px;
}
.job-movie-modal__close::before,
.job-movie-modal__close::after{
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:2px;
  background-color:#fff;
  content:"";
}
.job-movie-modal__close::before{
  -webkit-transform:translate(-50%, -50%) rotate(45deg);
          transform:translate(-50%, -50%) rotate(45deg);
}
.job-movie-modal__close::after{
  -webkit-transform:translate(-50%, -50%) rotate(-45deg);
          transform:translate(-50%, -50%) rotate(-45deg);
}
@media only screen and (min-width: 768px){
.p-job-movie{
    margin-bottom:60px
}
.p-job-movie__play{
    width:60px;
    height:60px
}
.p-job-movie__play::before{
    border-width:10px 0 10px 17px
}
.p-job-movie__label{
    margin-top:42px;
    font-size:1.3rem
}
.p-job-movie__caption{
    padding-top:20px
}
.p-job-movie__caption-title{
    font-size:1.8rem
}
.p-job-movie__caption-text{
    font-size:1.5rem
}
  }
@media only screen and (min-width: 1024px){
.p-job-movie{
    margin-bottom:90px
}
  }