main {
  width: 100%;
  overflow: hidden;
  position: relative
}

main.interviewbg {
  background: #f0f4f7
}

main .int_flex:nth-of-type(1) .txt_main {
  border: 1px solid #c8f255
}

main .int_flex:nth-of-type(2) .txt_main {
  border: 1px solid #28b79c
}

main .int_flex:nth-of-type(4) .txt_main {
  border: 1px solid #ff9700
}

.int_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto
}

@media only screen and (max-width: 768px) {
  .int_flex {
    padding: 0 8vw
  }
}

.int_flex .box {
  width: 20%;
  position: relative;
  margin: 0 0 5rem 0
}

@media only screen and (max-width: 768px) {
  .int_flex .box {
    width: 50%;
    margin: 0 0 2rem 0
  }
}

.int_flex .box a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  z-index: 3000
}

.int_flex .box .txt {
  transform: translateY(-10rem) translateX(-5.2rem)
}

@media only screen and (max-width: 768px) {
  .int_flex .box .txt {
    transform: none;
    text-align: center
  }
}

.int_flex .box:hover .image {
  opacity: .8
}

.int_flex .box .name {
  margin: 1rem 0
}

.int_flex .box .name p.jp {
  font-weight: bold;
  font-size: 1.4rem;
  font-feature-settings: "palt";
  letter-spacing: 0
}

.int_flex .box .profile {
  font-size: 1.3rem;
  line-height: 1.6
}

#int_wrap {
  width: 100%;
  position: relative;
  display: block;
  background: url("/img/top/bg.png") no-repeat 0 0;
  background-size: contain
}

.int_visual {
  position: relative;
  margin: 0 0 10rem 0
}

@media only screen and (max-width: 768px) {
  .int_visual {
    margin: 0 0 3rem 0
  }
}

.int_visual.right .copy {
  right: 10%;
  text-align: right
}

.int_visual.left .copy {
  left: 10%
}

.int_visual .image {
  max-width: 1200px;
  margin: auto;
  padding: 0 8vw
}

@media only screen and (max-width: 768px) {
  .int_visual .image {
    margin: 0 0 2rem 0
  }
}

.int_visual .copy {
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

@media only screen and (max-width: 768px) {
  .int_visual .copy {
    position: static;
    transform: none;
    padding: 0 8vw;
    text-align: center
  }
}

.int_visual .copy p.enm {
  margin: 0 0 3rem 0;
  font-weight: bold;
  color: #0c4bc1
}

@media only screen and (max-width: 768px) {
  .int_visual .copy p.enm {
    font-size: 1rem;
    margin: 0 0 1rem 0
  }
}

.int_visual .copy h1 {
  font-feature-settings: "palt";
  margin: 0 0 2rem 0
}

.int_visual .copy h1 span {
  display: inline-block;
  background: #fff;
  font-weight: bold;
  font-size: 3rem;
  padding: 0 1rem
}

@media only screen and (max-width: 768px) {
  .int_visual .copy h1 span {
    font-size: 1.6rem;
    padding: 0;
    background: none
  }
}

.int_visual .copy .prof {
  background: #fff;
  display: inline-block;
  padding: 1rem;
  font-weight: 500;
  font-size: 1.4rem
}

@media only screen and (max-width: 768px) {
  .int_visual .copy .prof {
    padding: 0;
    background: none;
    font-size: 1.2rem
  }
}

.mid_photo {
  margin: 0 0 10rem 0
}

@media only screen and (max-width: 768px) {
  .mid_photo {
    margin: 0 0 3rem 0
  }
}

.int_main {
  max-width: 1400px;
  margin: auto;
  padding: 5rem 8vw;
  background: #fff
}

@media only screen and (max-width: 768px) {
  .int_main {
    padding: 5rem 0
  }
}

.int_main .int_flex {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10rem 0
}

@media only screen and (max-width: 768px) {
  .int_main .int_flex {
    display: block;
    margin: 0 0 3rem 0
  }
}

.int_main .int_flex:nth-of-type(2) .txt:last-child .txt_main {
  border: 1px solid #ff4377 !important
}

.int_main .int_flex:last-child .txt .txt_main {
  border: 1px solid #00c4f7
}

.int_main .int_flex.only .txt {
  width: 60%;
  margin: auto
}

@media only screen and (max-width: 768px) {
  .int_main .int_flex.only .txt {
    width: 100%
  }
}

.int_main .int_flex.rv {
  flex-direction: row-reverse
}

.int_main .int_flex .txt {
  width: 48%
}

@media only screen and (max-width: 768px) {
  .int_main .int_flex .txt {
    width: 100%;
    margin: 0 0 2rem 0
  }
}

.int_main .int_flex .txt .question {
  display: flex;
  align-items: center
}

.int_main .int_flex .txt .question .q {
  width: 100px;
  margin: 0 2rem 0 0
}

@media only screen and (max-width: 768px) {
  .int_main .int_flex .txt .question .q {
    width: 80px
  }
}

.int_main .int_flex .txt .question h2 {
  flex: 1;
  font-weight: bold;
  font-size: 2.4rem
}

@media only screen and (max-width: 768px) {
  .int_main .int_flex .txt .question h2 {
    font-size: 1.6rem
  }
}

.int_main .int_flex .txt .txt_main {
  padding: 2rem
}

.int_main .int_flex .txt .txt_main h3 {
  font-weight: bold;
  font-size: 2rem;
  margin: 0 0 2rem 0
}

@media only screen and (max-width: 768px) {
  .int_main .int_flex .txt .txt_main h3 {
    font-size: 1.6rem
  }
}

.int_main .int_flex .image {
  width: 48%
}

@media only screen and (max-width: 768px) {
  .int_main .int_flex .image {
    width: 100%
  }
}

section.sc_pr {
  background: #e4eff5;
  padding: 10rem 0
}

@media only screen and (max-width: 768px) {
  section.sc_pr {
    padding: 3rem 0
  }
}

section.sc_pr .inner {
  max-width: 1400px;
  margin: auto;
  padding: 0 8vw
}

section.sc_pr .sc_pr_flex {
  display: flex;
  justify-content: space-between
}

@media only screen and (max-width: 768px) {
  section.sc_pr .sc_pr_flex {
    display: block
  }
}

section.sc_pr .sc_pr_flex .box {
  width: 48%;
  background: #fff;
  padding: 5rem
}

@media only screen and (max-width: 768px) {
  section.sc_pr .sc_pr_flex .box {
    width: 100%;
    padding: 3rem
  }
}

section.sc_pr .sc_pr_flex .box.sc {
  width: 48%
}

@media only screen and (max-width: 768px) {
  section.sc_pr .sc_pr_flex .box.sc {
    width: 100%
  }
}

section.sc_pr .sc_pr_flex .box.pr {
  width: 48%
}

@media only screen and (max-width: 768px) {
  section.sc_pr .sc_pr_flex .box.pr {
    width: 100%
  }
}

section.sc_pr .sc_pr_flex .box.pr .image {
  margin: 0 0 1rem 0
}

section.sc_pr .sc_pr_flex .box h4 {
  color: #0c4bc1;
  font-size: 2.4rem;
  letter-spacing: .05em
}

section.sc_pr .sc_pr_flex .box p.jp {
  font-weight: bold;
  margin: 0 0 2rem 0
}

section.sc_pr .sc_pr_flex .box dl {
  display: flex;
  border-bottom: 1px dotted #ccc;
  margin: 0 0 1rem 0;
  padding: 0 0 1rem 0
}

section.sc_pr .sc_pr_flex .box dl dt {
  font-weight: bold;
  width: 5em
}

section.sc_pr .sc_pr_flex .box dl dd {
  flex: 1;
  padding: 0 0 0 2rem
}

.job_box {
  width: 1000px;
  margin: auto;
  display: flex
}

@media only screen and (max-width: 768px) {
  .job_box {
    width: 100%;
    display: block
  }
}

.job_box.last {
  margin: 0 auto 10rem auto
}

@media only screen and (max-width: 768px) {
  .job_box.last {
    margin: 0
  }
}

.job_box ul.only {
  margin: 0 0 1rem 0
}

.job_box ul.only li {
  width: 100%;
  margin: auto
}

.job_box ul.two {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.job_box ul.two li {
  width: 49%
}

.job_box ul.doboku li a {
  color: #e54689
}

.job_box ul.doboku li a:hover {
  background: #e54689;
  color: #fff
}

.job_box ul.doboku li a:hover i {
  color: #e54689
}

.job_box ul.doboku li a i {
  background: #e54689
}

.job_box ul.kentiku li a {
  color: #3d75dc
}

.job_box ul.kentiku li a:hover {
  background: #3d75dc;
  color: #fff
}

.job_box ul.kentiku li a:hover i {
  color: #3d75dc
}

.job_box ul.kentiku li a i {
  background: #3d75dc
}

.job_box ul.jim li a {
  color: #31955b
}

.job_box ul.jim li a:hover {
  background: #31955b;
  color: #fff
}

.job_box ul.jim li a:hover i {
  color: #31955b
}

.job_box ul.jim li a i {
  background: #31955b
}

.job_box ul.kenkyu li a {
  color: #555
}

.job_box ul.kenkyu li a:hover {
  background: #555;
  color: #fff
}

.job_box ul.kenkyu li a:hover i {
  color: #555
}

.job_box ul.kenkyu li a i {
  background: #555
}

.job_box ul li.last a {
  margin: 0
}

.job_box ul li a {
  display: block;
  text-align: center;
  background: #fff;
  padding: 1.5rem 0;
  margin: 0 0 .5rem 0;
  font-weight: 500;
  border-radius: 5px;
  position: relative;
  z-index: 1000;
  cursor: pointer
}

.job_box ul li a span {
  font-size: 1rem
}

.job_box ul li a i {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 20px
}

.job_box ul li a:hover i {
  background: #fff
}

.job_box .block {
  margin: 0 0 1rem 0;
  padding: 0 0 1rem 0;
  border: 1px solid #fff;
  padding: 2rem
}

.job_box .block:last-child {
  border-bottom: none
}

.job_box h2 {
  font-size: 2rem;
  font-weight: 500;
  display: block;
  margin: 0 0 2rem 0;
  color: #fff;
  text-align: center;
  padding: 1rem 0
}

.job_box h2.doboku {
  background: #e54689
}

.job_box h2.kentiku {
  background: #3d75dc
}

.job_box h2.jim {
  background: #31955b
}

.job_box h2.kenkyu {
  background: #555
}

@media only screen and (max-width: 768px) {
  .job_box h2 {
    font-size: 1.6rem
  }
}

.job_box h3 {
  font-weight: 500;
  color: #000;
  text-align: center;
  margin: 0 0 1rem 0
}

.job_box .under {
  width: 100%;
  background: #ccc;
  padding: 3rem
}

.job_box .left {
  width: 30%;
  background: #e2a6ba;
  padding: 3rem
}

@media only screen and (max-width: 768px) {
  .job_box .left {
    width: 100%
  }
}

.job_box .center {
  width: 38%;
  background: #b8daea;
  padding: 3rem
}

@media only screen and (max-width: 768px) {
  .job_box .center {
    width: 100%
  }
}

.job_box .right {
  width: 32%;
  background: #94d1ae;
  padding: 3rem
}

@media only screen and (max-width: 768px) {
  .job_box .right {
    width: 100%
  }
}

@media only screen and (max-width: 768px) {
  .jobcont {
    margin: 0 0 5rem 0
  }
}

.jobcont .inner {
  min-width: 800px;
  max-width: 1000px;
  width: 100%;
  padding: 5%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee
}

@media only screen and (max-width: 768px) {
  .jobcont .inner {
    min-width: 0
  }
}

.jobcont .job_title {
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  padding: 2rem 0;
  border-radius: 50px;
  margin: 0 0 2rem 0
}

@media only screen and (max-width: 768px) {
  .jobcont .job_title {
    font-size: 1.4rem;
    padding: 1rem 0
  }

  .jobcont .job_title span {
    font-size: 1rem
  }
}

.jobcont .job_title.doboku {
  background: #e54689
}

.jobcont .job_title.kentiku {
  background: #3d75dc
}

.jobcont .job_title.jim {
  background: #31955b
}

.jobcont .job_title.kenkyu {
  background: #555
}

.jobcont .job_flex {
  display: flex;
  justify-content: space-between;
  padding: 5%
}

@media only screen and (max-width: 768px) {
  .jobcont .job_flex {
    display: block
  }
}

.jobcont .job_flex .txt {
  width: 48%
}

@media only screen and (max-width: 768px) {
  .jobcont .job_flex .txt {
    width: 100%
  }
}

.jobcont .job_flex .txt .exp {
  margin: 0 0 1rem 0
}

.jobcont .job_flex .txt h3 {
  font-weight: bold
}

.jobcont .job_flex .image {
  width: 44%
}

@media only screen and (max-width: 768px) {
  .jobcont .job_flex .image {
    width: 100%
  }
}

.jobcont .relatedss {
  padding: 5%
}

.jobcont .relatedss.dobokus {
  background: #fef9fb
}

.jobcont .relatedss.dobokus .pflexss .imagess {
  background: #e54689
}

.jobcont .relatedss.kentiku {
  background: #eaf0fb
}

.jobcont .relatedss.kentiku .pflexss .imagess {
  background: #3d75dc
}

.jobcont .relatedss.jim {
  background: #d4f1e0
}

.jobcont .relatedss.jim .pflexss .imagess {
  background: #31955b
}

.jobcont .relatedss.kenkyu {
  background: #bbb
}

.jobcont .relatedss.kenkyu .pflexss .imagess {
  background: #555
}

.jobcont .relatedss h3 {
  font-weight: bold;
  margin: 0 0 3rem 0;
  border-bottom: 1px solid #ccc;
  padding: 0 0 1rem 0
}

@media only screen and (max-width: 768px) {
  .jobcont .relatedss h3 {
    font-size: 1.2rem
  }
}

.jobcont .relatedss .pflexss {
  display: flex
}

@media only screen and (max-width: 768px) {
  .jobcont .relatedss .pflexss {
    flex-wrap: wrap;
    justify-content: space-between
  }
}

.jobcont .relatedss .pflexss .boxss {
  width: 140px;
  transition: all .3s ease;
  position: relative;
  margin: 0 2rem 0 0
}

@media only screen and (max-width: 768px) {
  .jobcont .relatedss .pflexss .boxss {
    width: 48%;
    margin: 0
  }
}

.jobcont .relatedss .pflexss .boxss a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  z-index: 3000
}

.jobcont .relatedss .pflexss .boxss:hover {
  opacity: .8
}

.jobcont .relatedss .pflexss .boxss .imagess {
  margin: 0 0 .5em 0;
  border-radius: 50%;
  width: 140px;
  height: 140px
}

@media only screen and (max-width: 768px) {
  .jobcont .relatedss .pflexss .boxss .imagess {
    width: 100%;
    height: auto
  }
}

.jobcont .relatedss .pflexss .boxss .namess {
  text-align: center;
  font-weight: 500;
  font-size: 1.4rem;
  font-feature-settings: "palt";
  letter-spacing: 0
}

.modal {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif
}

.modal::-webkit-scrollbar {
  display: none !important
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999
}

.modal__overlay::-webkit-scrollbar {
  display: none !important
}

.modal__container {
  padding: 30px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box
}

.modal__container::-webkit-scrollbar {
  display: none !important
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box
}

.modal__close {
  background: rgba(0, 0, 0, 0);
  border: 0;
  position: absolute;
  top: 2rem;
  right: 1rem;
  position: absolute;
  width: 7rem;
  height: 7rem;
  transition: all .3s ease;
  background: none;
  outline: none;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 50%;
  z-index: 1000
}

.modal__close:hover {
  background: #333
}

.modal__close:after {
  position: absolute;
  font-family: "Flaticon";
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  line-height: 1;
  content: "";
  font-size: 20px;
  font-size: 2rem;
  z-index: 999;
  color: #fff;
  transition: all .3s ease;
  display: block;
  z-index: 999;
  text-align: center
}

.modal__header .modal__close:before {
  content: "✕"
}

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, .8)
}

.modal__btn {
  font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, .8);
  border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .25s ease-out
}

.modal__btn:focus,
.modal__btn:hover {
  transform: scale(1.05)
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff
}

@keyframes mmfadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%)
  }

  to {
    transform: translateY(0)
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-10%)
  }
}

.micromodal-slide {
  display: none
}

.micromodal-slide.is-open {
  display: block
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide[aria-hidden=false] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide[aria-hidden=true] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform
}