.att {
  padding-left: 1em;
  text-indent: -1em
}

.att02 {
  padding-left: 1.3em;
  text-indent: -1.3em
}

.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto
}

.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  bottom: 0px;
  position: absolute
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  right: 0;
  position: absolute
}

.ps--active-x>.ps__rail-x,
.ps--active-y>.ps__rail-y {
  display: block;
  background-color: transparent
}

.ps:hover>.ps__rail-x,
.ps:hover>.ps__rail-y,
.ps--focus>.ps__rail-x,
.ps--focus>.ps__rail-y,
.ps--scrolling-x>.ps__rail-x,
.ps--scrolling-y>.ps__rail-y {
  opacity: 0.6
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9
}

.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  bottom: 2px;
  position: absolute
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  right: 2px;
  position: absolute
}

.ps__rail-x:hover>.ps__thumb-x,
.ps__rail-x:focus>.ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px
}

.ps__rail-y:hover>.ps__thumb-y,
.ps__rail-y:focus>.ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px
}

@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .ps {
    overflow: auto !important
  }
}

#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 0)
}

#cboxWrapper {
  max-width: none
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%
}

#cboxMiddleLeft,
#cboxBottomLeft {
  clear: left
}

#cboxContent {
  position: relative
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch
}

#cboxTitle {
  margin: 0
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
  cursor: pointer
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box
}

#cboxOverlay {
  background: rgba(255, 255, 255, 0.9);
  filter: alpha(opacity=90)
}

#colorbox {
  outline: 0
}

/* #cboxTopLeft {
  width: 21px;
  height: 21px;
  background: url(images/controls.png) no-repeat -101px 0
}

#cboxTopRight {
  width: 21px;
  height: 21px;
  background: url(images/controls.png) no-repeat -130px 0
}

#cboxBottomLeft {
  width: 21px;
  height: 21px;
  background: url(images/controls.png) no-repeat -101px -29px
}

#cboxBottomRight {
  width: 21px;
  height: 21px;
  background: url(images/controls.png) no-repeat -130px -29px
}

#cboxMiddleLeft {
  width: 21px;
  background: url(images/controls.png) left top repeat-y
}

#cboxMiddleRight {
  width: 21px;
  background: url(images/controls.png) right top repeat-y
}

#cboxTopCenter {
  height: 21px;
  background: url(images/border.png) 0 0 repeat-x
}

#cboxBottomCenter {
  height: 21px;
  background: url(images/border.png) 0 -29px repeat-x
} */

.cboxIframe {
  background: #fff
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc
}

#cboxLoadedContent {
  margin-bottom: 0;
  width: 800px
}

#cboxTitle {
  position: absolute;
  bottom: 4px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #949494
}

#cboxCurrent {
  position: absolute;
  bottom: 4px;
  left: 58px;
  color: #949494
}

/* #cboxLoadingOverlay {
  background: url(images/loading_background.png) no-repeat center center
}

#cboxLoadingGraphic {
  background: url(images/loading.gif) no-repeat center center
} */

#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none
}

#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {
  outline: 0
}

#cboxSlideshow {
  position: absolute;
  bottom: 4px;
  right: 30px;
  color: #0092ef
}

#cboxPrevious {
  position: absolute;
  top: 50%;
  left: 0;
  font-family: 'Flaticon';
  color: #fff;
  width: 44px;
  height: 44px;
  line-height: 1;
  content: "\f10d" !important;
  font-size: 18px;
  font-size: 1.8rem;
  z-index: 8999;
  line-height: 44px;
  transition: all 0.3s ease;
  display: block;
  color: #439637 !important;
  text-align: center
}

#cboxNext {
  font-family: 'Flaticon';
  color: #fff;
  width: 44px;
  height: 44px;
  line-height: 1;
  content: "\f10e" !important;
  font-size: 18px;
  font-size: 1.8rem;
  z-index: 8999;
  line-height: 44px;
  transition: all 0.3s ease;
  display: block;
  color: #439637 !important;
  text-align: center
}

#cboxClose {
  position: absolute;
  top: -2.2rem;
  right: 0;
  width: 44px;
  height: 44px;
  position: absolute;
  outline: none !important
}

@media only screen and (max-width: 768px) {
  #cboxClose {
    top: -4rem
  }
}

#cboxClose:after {
  font-family: 'Flaticon';
  color: #fff;
  width: 44px;
  height: 44px;
  background: #439637;
  line-height: 1;
  content: "\f11c" !important;
  font-size: 18px;
  font-size: 1.8rem;
  z-index: 8999;
  line-height: 44px;
  transition: all 0.3s ease;
  display: block;
  color: #fff !important;
  text-align: center
}

button.close {
  display: none
}

.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF)
}

.open-in {
  display: flex !important;
  opacity: 1
}

.open-modal {
  display: block !important;
  overflow: hidden
}

.open-modal a {
  z-index: 9 !important
}

.open-modal .inner {
  display: block !important
}

#wrap-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 9998;
  background: white;
  opacity: 0.9
}

#wrap-modal.active {
  visibility: visible;
  transition: all 0.5s
}

#wrap-modal .container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  position: absolute;
  transition: all 0.5s
}

#movie {
  max-width: 1400px;
  margin: auto;
  padding: 0 5%;
  background: #F8F6F4;
}

#movie .novisual_title {
  margin: 0;
}
#movie .wrap-movie {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 50px;
    width: 100%;
    margin: 0 0 5rem 0
}
@media only screen and (max-width: 768px) {
    #movie .wrap-movie {
        row-gap: 20px;
    }
}

#movie .wrap-movie .item {
  width: calc((100% - 60px)/3);
}

#movie .wrap-movie .item .image {
    overflow: hidden;
    position: relative;
}
#movie .wrap-movie .item img {
    width: 100%;
    transition: all 0.3s ease;
}
#movie .wrap-movie .item h2 {
    margin-top: 10px;
    font-weight: 600;
}

@media only screen and (max-width: 768px) {
  #movie .wrap-movie .item {
    width: 100%
  }
}

#movie .wrap-movie .item a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 999;
    position: relative;
}
#movie .wrap-movie .item .image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: url(/fujioil/recruit/gradu/img/video/playbtn.svg) no-repeat center / contain;
}
#movie .wrap-movie .item a:hover img {
    transform: scale(1.04);

}

#movie .wrap-movie .item .modal-in {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99999;
  transition: all 0.5s;
  opacity: 0;
  background: red;
}

#movie .wrap-movie .item .modal-in.open-in {
  opacity: 1
}

#movie .wrap-movie .item .modal-in .inner {
  max-width: 1000px;
  display: none;
  position: relative;
}

@media only screen and (max-width: 768px) {
  #movie .wrap-movie .item .modal-in .inner {
    width: 100%;
    padding: 0 30px
  }
}

iframe {
  background: #fff;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}
#cboxClose{
    top: -5rem;
}
@media only screen and (max-width: 768px) {
    #cboxClose{
        top: -5rem;
    }
}

/* .copy {
  background-color: #439637;
  color: #fff;
  padding: 3px 10px;
  display: inline-block
}
*/