@charset "UTF-8";

html {
    background: #fff;
    overflow-x: hidden;
    width: 100%;
    font-size: 62.5%;
}

body {
    color: #00263b;
    line-height: 200%;
    overflow-x: hidden;
    font-family: 'Roboto', 'Hiragino Sans', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;
    max-width: 1920px;
    margin: 0 auto
}

img {
    width: 100%
}

li {
  list-style-type: none;
}

.pc_only {
    display: block
}

.sp_only {
    display: none
}


/* ----------------------
general
---------------------- */
.mb10 {margin-bottom: calc(10 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 10px;} }
.mb20 {margin-bottom: calc(20 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 20px;} }
.mb30 {margin-bottom: calc(30 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 30px;} }
.mb40 {margin-bottom: calc(40 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 40px;} }
.mb50 {margin-bottom: calc(50 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 50px;} }
.mb60 {margin-bottom: calc(60 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 60px;} }
.mb70 {margin-bottom: calc(70 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 70px;} }
.mb80 {margin-bottom: calc(80 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 80px;} }
.mb90 {margin-bottom: calc(90 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 90px;} }
.mb100 {margin-bottom: calc(100 / 750 * 100vw); @media only screen and (min-width: 751px) {margin-bottom: 100px;} }

/* ----------------------
header
---------------------- */
header {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* ----------------------
main
---------------------- */
main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* ----------------------
parts
---------------------- */
.txt-box {
  padding: calc(50 / 750 * 100vw) calc(40 / 750 * 100vw);

  @media only screen and (min-width: 751px) {
    padding: 60px 40px;
  }

  p {
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.6;
    margin-bottom: calc(40 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      font-size: 28px;
      margin-bottom: 40px;
    }

    &:last-of-type {
      margin-bottom: 0;
    }

    &:first-of-type {
      margin-bottom: calc(40 / 750 * 100vw);
    }

    span {
      color: #209cff;
      font-weight: bold;
    }

    &:has(+ .note) {
      margin-bottom: calc(10 / 750 * 100vw);

      @media only screen and (min-width: 751px) {
        margin-bottom: 10px;
      }
    }

    &.note {
      font-size: calc(20 / 750 * 100vw);

      @media only screen and (min-width: 751px) {
        font-size: 2rem;
      }
    }
  }
}

.readmore {
  position: relative;

  label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    bottom: calc(-120 / 750 * 100vw);
    margin: 0 auto;
    width: calc(490 / 750 * 100vw);
    height: calc(90 / 750 * 100vw);
    color: #fff;
    text-align: center;
    border-radius: 100vh;
    background-color: #00263b;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 1;
    font-size: calc(30 / 750 * 100vw);
    font-weight: bold;

    @media only screen and (min-width: 751px) {
      bottom: -120px;
      width: 490px;
      height: 90px;
      font-size: 3.0rem;
    }

    &::before {
      content: 'もっと見る';
    }

    &::after {
      position: absolute;
      top: 50%;
      right: calc(50 / 750 * 100vw);
      transform: translateY(-50%);
      content: "";
      width: calc(22 / 750 * 100vw);
      height: calc(22 / 750 * 100vw);
      background: url(../images/icon-plus.webp) no-repeat bottom center/contain;
    }

    @media only screen and (min-width: 751px) {
      &::after {
        right: 50px;
        width: 22px;
        height: 22px;
      }
    }
  }

  input {
    &[type="checkbox"]:checked ~ label::before {
      content: '元に戻す';
    }

    &[type="checkbox"]:checked ~ label::after {
      position: absolute;
      top: 50%;
      right: calc(50 / 750 * 100vw);
      transform: translateY(-50%);
      content: "";
      width: calc(22 / 750 * 100vw);
      height: calc(22 / 750 * 100vw);
      background: url(../images/icon-minus.webp) no-repeat bottom center/contain;
    }

    @media only screen and (min-width: 751px) {
      &[type="checkbox"]:checked ~ label::after {
        right: 50px;
        width: 22px;
        height: 22px;
      }
    }

    &[type="checkbox"]{
      display: none;
    }
  }

  .readmore-content {
    position: relative;
    height: calc(150 / 750 * 100vw);
    overflow: hidden;

    @media only screen and (min-width: 751px) {
      height: 150px;
    }

    &::before {
      position: absolute;
      display: block;
      content: "";
      bottom: 0;
      left: 0;
      width: 100%;
      height: 75px;
      background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 70%, #fff 100%);
    }
  }

  input[type="checkbox"] {
    &:checked ~ .readmore-content {
      height: auto;
    }

    &:checked ~ .readmore-content::before {
      display: none;
    }
  }
}

/* ----------------------
stepup
---------------------- */
.stepup {
  padding-top: calc(70 / 750 * 100vw);
  padding-bottom: calc(270 / 750 * 100vw);
  background: url(../images/bg_section01.webp) no-repeat bottom center/cover;

  @media only screen and (min-width: 751px) {
    padding-top: 70px;
    padding-bottom: 270px;
  }

  h2 {
    margin-bottom: calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 60px;
    }
  }
}

/* ----------------------
potential
---------------------- */
.potential {
  padding-top: calc(106 / 750 * 100vw);
  padding-bottom: calc(250 / 750 * 100vw);

  @media only screen and (min-width: 751px) {
    padding-top: 106px;
    padding-bottom: 250px;
  }

  h2 {
    margin-bottom: calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 60px;
    }
  }
}

/* ----------------------
smiconductor
---------------------- */
.smiconductor {
  padding-top: calc(75 / 750 * 100vw);
  padding-bottom: calc(260 / 750 * 100vw);
  background: url(../images/bg_section02.webp) no-repeat bottom center/cover;

  @media only screen and (min-width: 751px) {
    padding-top: 75px;
    padding-bottom: 260px;
  }

  h2 {
    margin-bottom: calc(50 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 50px;
    }
  }

  .smiconductor-detail {
    width: calc(670 / 750 * 100vw);
    margin: 0 auto calc(40 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      width: 670px;
      margin: 0 auto 40px;
    }

    &.last-of-type {
      margin-bottom: calc(50 / 750 * 100vw);

      @media only screen and (min-width: 751px) {
        margin-bottom: 50px;
      }
    }

    .txt-box {
      background-color: #fff;
      border-radius: 0 0 calc(40 / 750 * 100vw) calc(40 / 750 * 100vw);

      @media only screen and (min-width: 751px) {
        border-radius: 0 0 40px 40px;
      }
    }
  }
}

/* ----------------------
description
---------------------- */
.description {
  padding-top: calc(80 / 750 * 100vw);
  padding-bottom: calc(300 / 750 * 100vw);
  background: url(../images/bg_section03.webp) no-repeat bottom center/cover;

  @media only screen and (min-width: 751px) {
    padding-top: 80px;
    padding-bottom: 300px;
  }

  h2 {
    margin-bottom: calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 60px;
    }
  }

  .txt-box {
    position: relative;
    background-color: #f5f5f0;
    border-radius: calc(40 / 750 * 100vw) calc(40 / 750 * 100vw) 0 0;
    width: calc(670 / 750 * 100vw);
    margin: 0 auto calc(200 / 750 * 100vw);

    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(100%);
      content: "";
      width: calc(670 / 750 * 100vw);
      height: calc(138 / 750 * 100vw);
      background: url(../images/img_description-arrow.webp) no-repeat bottom center/cover;
    }

    @media only screen and (min-width: 751px) {
      border-radius: 40px 40px 0 0;
      width: 670px;
      margin: 0 auto 200px;

      &::after {
        width: 670px;
        height: 138px;
      }
    }
  }

  .map {
    width: calc(670 / 750 * 100vw);
    margin: 0 auto calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      width: 670px;
      margin: 0 auto 60px;
    }
  }
}

/* ----------------------
tab
---------------------- */
/* タブ */
.tab {
  width: calc(670 / 750 * 100vw);
  margin: 0 auto calc(80 / 750 * 100vw);

  @media only screen and (min-width: 751px) {
    width: 670px;
    margin: 0 auto 80px;
  }

  .tab-list {
    display: flex;
    gap: calc(5 / 750 * 100vw);
    margin-bottom: -1px;

    @media only screen and (min-width: 751px) {
      cursor: pointer;
    }

    @media only screen and (min-width: 751px) {
      gap: 5px;
    }

    .tab-list__item {
      .tab3 & {
        width: calc(1 / 3 * 100%);
      }
      .off {
        .is-active & {
          display: none;
        }
      }

      .on {
        display: none;

        .is-active & {
          display: block;
        }
      }
    }
  }

  .tab-content-box {
    width: 100%;
    border: #00263b solid 1px;
    border-radius:0 0 calc(20 / 750 * 100vw) calc(20 / 750 * 100vw);
    overflow: hidden;

    @media only screen and (min-width: 751px) {
      border-radius:0 0 20px 20px;
    }

    .tab-content {
      width: 100%;
      padding: calc(354 / 750 * 100vw) calc(40 / 750 * 100vw) calc(60 / 750 * 100vw);
      background: #fff no-repeat top center / contain;

      @media only screen and (min-width: 751px) {
        padding: 354px 40px 60px;
      }

      .voices & {
        padding-bottom: calc(170 / 750 * 100vw);

        @media only screen and (min-width: 751px) {
          padding-bottom: 170px;
        }
      }

      .description & {
        &[data-tab="tab-1"] {
          background-image: url(../images/bg_tab01-1.webp);
        }
        &[data-tab="tab-2"] {
          background-image: url(../images/bg_tab01-2.webp);
        }
        &[data-tab="tab-3"] {
          background-image: url(../images/bg_tab01-3.webp);
        }
      }

      .career & {
        &[data-tab="tab-1"] {
          background-image: url(../images/bg_tab02-1.webp);
        }
        &[data-tab="tab-2"] {
          background-image: url(../images/bg_tab02-2.webp);
        }
        &[data-tab="tab-3"] {
          background-image: url(../images/bg_tab02-3.webp);
        }
      }

      .voices & {
        &[data-tab="tab-1"] {
          background-image: url(../images/bg_tab03-1.webp);
        }
        &[data-tab="tab-2"] {
          background-image: url(../images/bg_tab03-2.webp);
        }
      }
    }
 }
}

/* ----------------------
career
---------------------- */
.career {
  padding-top: calc(120 / 750 * 100vw);
  padding-bottom: calc(268 / 750 * 100vw);

  @media only screen and (min-width: 751px) {
    padding-top: 120px;
    padding-bottom: 268px;
  }

  h2 {
    margin-bottom: calc(50 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 50px;
    }
  }
}

/* ----------------------
training
---------------------- */
.training {
  padding-top: calc(80 / 750 * 100vw);
  padding-bottom: calc(270 / 750 * 100vw);
  background-color: #f5f5f0;

  @media only screen and (min-width: 751px) {
    padding-top: 80px;
    padding-bottom: 270px;
  }

  .training-flow {
    width: calc(670 / 750 * 100vw);
    margin: 0 auto calc(56 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      width: 670px;
      margin: 0 auto 56px;
    }
  }

  .transfer {
    margin-bottom: calc(110 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 110px;
    }
  }

  .txt-box {
    margin-bottom: calc(10 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 10px;
    }
  }
}

/* ----------------------
company
---------------------- */
.company {
  padding-top: calc(100 / 750 * 100vw);
  background-color: #7fcd45;

  @media only screen and (min-width: 751px) {
    padding-top: 100px;
  }

  h2 {
    margin-bottom: calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 60px;
    }
  }

  h3 {
    padding-bottom: 0;
  }

  .txt-box {
    padding-bottom: calc(20 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      padding-bottom: 20px;
    }
  }

  .picture {
    position: relative;
    width: calc(670 / 750 * 100vw);
    margin: 0 auto calc(90 / 750 * 100vw);

    &::after {
      position: absolute;
      bottom: calc(-36 / 750 * 100vw);
      left: calc(-13 / 750 * 100vw);
      content: "";
      background: url(../images/img_medal.webp) no-repeat bottom center/cover;
      width: calc(164 / 750 * 100vw);
      height: calc(189 / 750 * 100vw);
    }

    @media only screen and (min-width: 751px) {
      width: 670px;
      margin: 0 auto 90px;

      &::after {
        bottom: -36px;
        left: -13px;
        width: 164px;
        height: 189px;
      }
    }
  }

  .company-graph {
    width: calc(670 / 750 * 100vw);
    margin: calc(20 / 750 * 100vw) auto 0;

    @media only screen and (min-width: 751px) {
      width: 670px;
      margin: 20px auto 0;
    }
  }
}

/* ----------------------
voices
---------------------- */
.voices {
  padding-top: calc(90 / 750 * 100vw);
  padding-bottom: calc(250 / 750 * 100vw);
  background-color: #7fcd45;

  @media only screen and (min-width: 751px) {
    padding-top: 90px;
    padding-bottom: 250px;
  }

  h2 {
    margin-bottom: calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 60px;
    }
  }

  .txt-box {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
}

/* ----------------------
selection
---------------------- */
.selection {
  padding-top: calc(100 / 750 * 100vw);
  background: url(../images/bg_section04.webp) no-repeat top center/cover;

  @media only screen and (min-width: 751px) {
    padding-top: 100px;
  }

  h2 {
    margin-bottom: calc(50 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 50px;
    }
  }

  h3 {
    margin-bottom: calc(45 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 45px;
    }
  }

  ol.step {
    width: calc(670 / 750 * 100vw);
    margin: 0 auto calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      width: 670px;
      margin: 0 auto 60px;
    }

    li {
      margin-bottom: calc(-17 / 750 * 100vw);
      position: relative;

      @media only screen and (min-width: 751px) {
        margin-bottom: -17px;
      }

      &:last-of-type {
        margin-bottom: 0;
      }

      &:nth-of-type(1) {z-index: 4;}
      &:nth-of-type(2) {z-index: 3;}
      &:nth-of-type(3) {z-index: 2;}
      &:nth-of-type(4) {z-index: 1;}
    }
  }

  .interview {
    margin-top: calc(60 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-top: 60px;
    }
  }
}

/* ----------------------
entryform
---------------------- */
.entryform {
  padding-top: calc(60 / 750 * 100vw);
  padding-bottom: calc(110 / 750 * 100vw);

  @media only screen and (min-width: 751px) {
    padding-top: 60px;
    padding-bottom: 110px;
  }

  h2 {
    margin-bottom: calc(55 / 750 * 100vw);

    @media only screen and (min-width: 751px) {
      margin-bottom: 55px;
    }
  }

  /* ダミーです。 */
  .form-area {
    width: calc(670 / 750 * 100vw);
    height: calc(1052 / 750 * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #b1b1b1;
    font-size: calc(26 / 750 * 100vw);
    color: #fff;
    font-weight: bold;

    @media only screen and (min-width: 751px) {
      width: 670px;
      height: 1052px;
      font-size: 2.6rem;
    }
  }
}

/* ----------------------
page-top
---------------------- */
.page-top {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(136 / 750 * 100vw);

  @media only screen and (min-width: 751px) {
    width: 68px;
  }
}

/* ----------------------
fixed-cv
---------------------- */
.fixed-cv {
  position: fixed;
  z-index: 10;
  right: calc(20 / 750 * 100vw);
  bottom: calc(166 / 750 * 100vw);
  width: calc(202 / 750 * 100vw);
  transition: all 300ms;
  opacity: 1;
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
  border-radius: 100%;
  box-shadow: calc(16 / 750 * 100vw) calc(16 / 750 * 100vw) calc(57 / 750 * 100vw) 0px rgba(0, 0, 0, 0.2);

  @media only screen and (min-width: 751px) {
    right: 20px;
    bottom: 166px;
    width: 202px;
    box-shadow: 16px 16px 57px 0px rgba(0, 0, 0, 0.2);
  }

  &.vanish {
    visibility: hidden;
    opacity: 0;
  }
}

@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

/* ----------------------
footer
---------------------- */
/* ダミーです。 */
footer {
  width: 100%;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-color: #b1b1b1;
  font-size: calc(26 / 750 * 100vw);
  color: #fff;
  font-weight: bold;

  @media only screen and (min-width: 751px) {
    font-size: 2.6rem;
  }
}


/* ----------------------
btn
---------------------- */
.btn {
    position: relative;
    width: calc(720/750*100vw);
    max-width: 720px;
    margin: 0 0 0 auto;

    .cv_btn {
      width: calc(690/750*100vw);
      max-width: 690px;
      margin: 0 auto;
      display: block;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-animation: swing 2s ease-in infinite;
      animation: swing 2s ease-in infinite;
      position: absolute;
      top: 0;
      left: 0;
    }
  }


/* ----------------------
  btn.animation
---------------------- */
.shine {
    position: absolute;
    width: calc(690/750 * 100vw);
    height: calc(160/750 * 100vw);
    max-width: 690px;
    max-height: 160px;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: 100vh;

    &::before {
      content: "";
      width: 200%;
      height: 200%;
      background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
      background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
      position: absolute;
      top: -50%;
      left: -50%;
      z-index: 1;
      animation: shine 1.8s linear infinite;
    }
  }
  
  @keyframes shine {
    from, 0% {
      -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
      transform: translate3d( -100%, 0, 0) rotate(45deg);
      opacity: 0;
    }
    20% {
      -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
      transform: translate3d( -100%, 0, 0) rotate(45deg);
      opacity: 1;
    }
    70% {
      -webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);
      transform: translate3d( 100%, 0, 0) rotate(45deg);
      opacity: 1;
    }
    80% {
      -webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);
      transform: translate3d( 100%, 0, 0) rotate(45deg);
      opacity: 0;
    }
    to, 100% {
      -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
      transform: translate3d( -100%, 0, 0) rotate(45deg);
      opacity: 0;
    }
  }
  
  @keyframes swing {
    from, 0% {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
    10% {
      -webkit-transform: translate3d( -2%, 0, 0);
      transform: translate3d( -2%, 0, 0);
    }
    20% {
      -webkit-transform: translate3d( 2%, 0, 0);
      transform: translate3d( 2%, 0, 0);
    }
    30% {
      -webkit-transform: translate3d( -2%, 0, 0);
      transform: translate3d( -2%, 0, 0);
    }
    40% {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
    60% {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
    to, 100% {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
  }