/*--------------------------------------------------------------
# WORKS: 各部署の紹介
--------------------------------------------------------------*/
.works {
  margin: 0px 0px 50px 0px;
}
.works a {
  text-decoration: none;
  outline: none;
}

.works-box,
.works2-box,
.works3-box,
.works4-box {
  display: flex;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background-color: #000;
}

.works-content {
  flex: 1;
  padding: 60px;
  color: #fff;
  flex-direction: column;
  justify-content: center;
}

.works-image {
  flex: 1;
  transition: transform 1.2s ease;
  background-size: cover;
  background-position: center;
}

.works-image1 {
  flex: 1;
  background: url("../img/works/w1.jpg") center center no-repeat;
  background-size: 500px 500px;
}
.works-image2 {
  flex: 1;
  background: url("../img/works/w2.jpg") center center no-repeat;
  background-size: 500px 500px;
}
.works-image3 {
  flex: 1;
  background: url("../img/works/w3.jpg") center center no-repeat;
  background-size: 500px 500px;
}
.works-image4 {
  flex: 1;
  background: url("../img/works/w4.jpg") center center no-repeat;
  background-size: 500px 500px;
}
/* hover で拡大 */
/* hover で拡大（各画像に対応した親クラスとセットで） */
.works-box:hover .works-image,
.works-box2:hover .works-image2,
.works-box3:hover .works-image3,
.works-box4:hover .works-image4 {
  transform: scale(1.1);
}

.works-box:hover,
.works-box2:hover,
.works-box3:hover,
.works-box4:hover * {
  color: #56dbe0 !important;
}

.works-box1,
.works-box2,
.works-box3,
.works-box4 {
  background-size: contain;
  background-color: #000;
  margin: 0;
}

.works-title {
  font-size: 80px;
  line-height: 1em;
  width: 100%;
  color: #c3c3c3;
  letter-spacing: 0.1em;
  margin: 0px 0px 10px 0px;
  position: absolute;
  z-index: 2;
}
.works-title-long {
  font-size: 80px;
  line-height: 1em;
  color: #c3c3c3;
  letter-spacing: 0.1em;
  margin: 0px 0px 10px 0px;
}
.works-title-sub {
  font-size: 17px;
  line-height: 1.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 100px 0px 70px 0px;
}
.works-txt {
  width: 100%;
  font-size: 17px;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 70px 0px;
}

.gtc {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.g-back {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ----- Media queries ----- */
@media (min-width: 992px) and (max-width: 1200px) {
  .works-txt {
    width: 100%;
    font-size: 17px;
    margin: 0px 0px 70px 0px;
  }
}

@media (min-width: 740px) and (max-width: 991px) {
  .works-image {
    background-size: cover;
    background-color: #000;
  }

  .works-box1 {
    background: url("../img/works/w1.jpg") center center no-repeat;

    margin: 0;
  }
  .works-box2 {
    background: url("../img/works/w2.jpg") center right no-repeat;

    margin: 0;
  }
  .works-box3 {
    background: url("../img/works/w3.jpg") center right no-repeat;

    margin: 0;
  }
  .works-box4 {
    background: url("../img/works/w4.jpg") center right no-repeat;

    margin: 0;
  }
  .works-title {
    font-size: 70px;
    line-height: 1em;
    color: #c3c3c3;
    letter-spacing: 0.1em;
    margin: 0px 0px 10px 0px;
  }
  .works-title-long {
    font-size: 70px;
    line-height: 1em;
    color: #c3c3c3;
    letter-spacing: 0.1em;
    margin: 0px 0px 10px 0px;
  }
  .works-txt {
    width: 60%;
    font-size: 17px;
    margin: 0px 0px 70px 0px;
  }
  .gtc {
    display: flex;
    justify-content: flex-end;
  }

  .works-box,
  .works-box2,
  .works-box3,
  .works-box4 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 400px;
    overflow: hidden;
  }

  .works-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
  }

  .works-content {
    position: relative;
    z-index: 2;
    padding: 30px 20px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
  }

  .works-title {
    font-size: 28px;
    margin-bottom: 10px;
    position: relative;
  }

  .works-title-sub,
  .works-txt {
    font-size: 15px;
    margin-bottom: 20px;
    margin: 20px 0px 30px 0px;
  }

  .flx {
    justify-content: center;
  }
}
@media (max-width: 739px) {
  .works-box,
  .works-box2,
  .works-box3,
  .works-box4 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 400px;
    overflow: hidden;
  }

  .works-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
  }

  .works-content {
    position: relative;
    z-index: 2;
    padding: 80px 20px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
  }

  .works-title {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .works-title-sub,
  .works-txt {
    font-size: 17px;
    margin-bottom: 20px;
    margin: 20px 0px 30px 0px;
  }

  .flx {
    justify-content: left;
  }

  .works-box1 {
    background: url("../img/works/w1.jpg") center center no-repeat;
    background-size: cover;
    background-color: #000;
    margin: 0;
  }
  .works-box2 {
    background: url("../img/works/w2.jpg") center right no-repeat;
    background-color: #000;
    margin: 0;
  }
  .works-box3 {
    background: url("../img/works/w3.jpg") center right no-repeat;
    background-color: #000;
    margin: 0;
  }
  .works-box4 {
    background: url("../img/works/w4.jpg") center right no-repeat;
    background-color: #000;
    margin: 0;
  }
  .works-title {
    font-size: 48px;
    line-height: 1em;
    color: #c3c3c3;
    letter-spacing: 0.1em;
    margin: 0px 0px 10px 0px;
    position: relative;
  }
  .works-title-long {
    font-size: 42px;
    line-height: 1em;
    color: #c3c3c3;
    letter-spacing: 0.1em;
    margin: 0px 0px 10px 0px;
  }

  .gtc {
    display: flex;
    justify-content: flex-end;
  }
}

/*--------------------------------------------------------------
# WORKS: 各部署の紹介
--------------------------------------------------------------*/
a.wks-anker {
  display: block;
  margin-top: -150px;
  padding-top: 150px;
}
.wpd {
  padding: 0px 0px 0px 0px;
}

.wks-top {
  border-top: solid 1px #7f7f7f;
  margin: 0px 0px 150px 0px;
  position: relative;
}
.wk01-top {
  border-top: solid 1px #7f7f7f;
  margin: 0px 0px 150px 0px;
  position: relative;
  background-image: url("../img/works/1/wks01-top.jpg"); /* 画像のURL */
  background-size: cover; /* 画像を要素いっぱいにカバー */
  background-position: center; /* 画像の中央を表示 */
  background-attachment: fixed; /* 画像を固定 */
  background-repeat: no-repeat; /* 繰り返しなし */
  height: 50vh; /* 要素の高さをビューポートいっぱいに */
}
.wk02-top {
  border-top: solid 1px #7f7f7f;
  margin: 0px 0px 150px 0px;
  position: relative;
  background-image: url("../img/works/2/wks02-top.jpg"); /* 画像のURL */
  background-size: cover; /* 画像を要素いっぱいにカバー */
  background-position: center; /* 画像の中央を表示 */
  background-attachment: fixed; /* 画像を固定 */
  background-repeat: no-repeat; /* 繰り返しなし */
  height: 50vh; /* 要素の高さをビューポートいっぱいに */
}
.wk03-top {
  border-top: solid 1px #7f7f7f;
  margin: 0px 0px 150px 0px;
  position: relative;
  background-image: url("../img/works/3/wks03-top.jpg"); /* 画像のURL */
  background-size: cover; /* 画像を要素いっぱいにカバー */
  background-position: center; /* 画像の中央を表示 */
  background-attachment: fixed; /* 画像を固定 */
  background-repeat: no-repeat; /* 繰り返しなし */
  height: 50vh; /* 要素の高さをビューポートいっぱいに */
}
.wk04-top {
  border-top: solid 1px #7f7f7f;
  margin: 0px 0px 150px 0px;
  position: relative;
  background-image: url("../img/works/4/wks04-top.jpg"); /* 画像のURL */
  background-size: cover; /* 画像を要素いっぱいにカバー */
  background-position: center; /* 画像の中央を表示 */
  background-attachment: fixed; /* 画像を固定 */
  background-repeat: no-repeat; /* 繰り返しなし */
  height: 50vh; /* 要素の高さをビューポートいっぱいに */
}
.wks {
  padding: 0;
  margin: 0px 0px 150px 0px;
  position: relative;
  z-index: 2; /* テキストが上に来るように */
}
.wks-title {
  display: block;
  font-size: 35px;
  line-height: 1.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 30px 0px;
}
.wks-title-sp {
  display: none;
}
.wks-txt {
  font-size: 16px;
  line-height: 2.5em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 50px 0px;
}
.wks-image-flx {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wks-image-twin {
  width: 48%;
  text-align: center;
  margin: 0px 0px 10px 0px;
}
.wks-image-twin img {
  margin: 0px 0px 10px 0px;
}
.wks-image {
  text-align: center;
  margin: 0px 0px 15px 0px;
}
.wks-com {
  text-align: center;
  font-size: 14px;
  line-height: 1.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 50px 0px;
}
.wks-image-nc {
  text-align: center;
  margin: 0px 0px 40px 0px;
}
.wks-com-set1 {
  text-align: center;
  font-size: 14px;
  line-height: 1.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 20px 0px;
}
.wks-com-set2 {
  text-align: justify;
  font-size: 14px;
  line-height: 1.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 50px 0px;
}

/* ----- Media queries ----- */
@media (min-width: 992px) and (max-width: 1200px) {
  .wks-title-sp {
    display: none;
  }
}
@media (min-width: 740px) and (max-width: 991px) {
  .wks-title-sp {
    display: none;
  }
}
@media (max-width: 739px) {
  .wks-title {
    display: none;
  }
  .wks-title-sp {
    display: block;
    font-size: 30px;
    line-height: 1.3em;
    letter-spacing: 0.1em;
    color: #c3c3c3;
    margin: 0px 0px 30px 0px;
  }
  .wks-image-flx {
    display: block;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .wks-image-twin {
    width: 100%;
    text-align: center;
    margin: 0px 0px 10px 0px;
  }
}

/*--------------------------------------------------------------
# RECRUIT
--------------------------------------------------------------*/
.recruit {
  margin: 0px 0px 50px 0px;
}
.recruit a {
  color: #c3c3c3;
  text-decoration: none;
  outline: none;
}

.overlay-layer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* オーバーレイ色 */
  z-index: 1;
}

.stf-box1 {
  height: 450px;
  background: url("../img/rec/stf-1.jpg") center right no-repeat;
  background-color: #000;
  background-size: contain;
  background-position: right;
  position: relative;
  overflow: hidden;
}
.stf-box2 {
  height: 450px;
  background: url("../img/rec/stf-2.jpg") center right no-repeat;
  background-color: #000;
  background-size: contain;
  background-position: right;
  position: relative;
  overflow: hidden;
}
.stf-box3 {
  height: 450px;
  background: url("../img/rec/stf-3.jpg") center right no-repeat;
  background-color: #000;
  background-size: contain;
  background-position: right;
  position: relative;
  overflow: hidden;
}

.left-bank {
  display: flex;
  width: 100%;
  height: 450px;
  flex-flow: wrap;
  align-items: center;
  /* 縦方向の並び順*/
  /*    
  flex-start：上揃え（デフォルト）
  flex-end：下揃え
  center：中央揃え
  baseline：ベースライン
  stretch：伸縮
  */
  padding: 0 60px;
  /* border: solid 1px #ccc; */
}

.rec-title {
  font-size: 32px;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 0px 0px;
}
.sp-stf-img {
  display: block;
  text-align: center;
  padding: 0;
  opacity: 0;
  width: 0;
}

.rec-id {
  display: block;
  width: 100%;
}
.stf-flx {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.stf-data {
  display: block;
  color: #c3c3c3;
}
.stf-id-flx {
  display: flex;
  align-items: center;
  justify-content: start;
}

.stf-id-1 {
  font-size: 16px;
  line-height: 1.3em;
  letter-spacing: 0em;
  margin: 0px 0px 10px 0px;
}
.stf-id-2 {
  font-size: 23px;
  line-height: 1.3em;
  letter-spacing: 0em;
  margin: 0;
}
.stf-id-3 {
  font-size: 13px;
  line-height: 1.3em;
  letter-spacing: 0em;
  margin: 0px 0px 0px 15px;
}
.stf-name-flx {
  display: flex;
  align-items: end;
  justify-content: flex-start;
}
.stf-ar {
  width: 15%;
  margin: 0px 0px 0px 50px;
}
.stf-ar img {
  width: 45px;
}

/* ページ下バナー */
.flx-wrb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 0px 0px 0px;
}
.wrb-box {
  width: 100%;
  margin: 0px 0px 100px 0px;
}
.wrb {
  overflow: hidden;
  position: relative;
  width: 100%;
  cursor: pointer;
}
.wrb-bg {
  width: 100%;
  height: 400px;
  position: relative;
  z-index: 0;
  transition: 0.3s ease-in-out;
}
.wrb1 {
  background: url("../img/rec/rec-bn-1_02.jpg") center center / cover no-repeat;
}
.wrb2 {
  background: url("../img/rec/rec-bn-2_02.jpg") center center / cover no-repeat;
}
.wrb3 {
  background: url("../img/rec/rec-bn-4_02.jpg") center center / cover no-repeat;
}

.wrb-bg:hover {
  transform: scale(1.1);
}

.wrb-bg::before {
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.wrb-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  pointer-events: none;
}
.wrb-txt h3 {
  text-align: center;
  color: #e8e8e8;
  font-size: 32px;
  line-height: 1.3em;
  letter-spacing: 0em;
}

/* ----- Media queries ----- */
@media (min-width: 992px) and (max-width: 1200px) {
}
@media (min-width: 740px) and (max-width: 991px) {
  .stf-box1,
  .stf-box2,
  .stf-box3 {
    width: 100%;
    height: auto;
    background-image: none;
  }
  .left-bank {
    display: flex;
    width: 100%;
    height: auto;
    flex-flow: wrap;
    align-items: center;
    padding: 50px;
    /* border: solid 1px #ccc; */
  }
  .rec-title {
    font-size: 26px;
    line-height: 1.5em;
    letter-spacing: 0em;
    color: #c3c3c3;
    margin: 0px 0px 0px 0px;
  }
  .sp-stf-img {
    display: block;
    text-align: center;
    padding: 0;
    opacity: 1;
    width: 100%;
    padding: 40px 0;
  }
  .rec-id {
    display: block;
    width: 100%;
  }
  .stf-flx {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .stf-data {
    display: block;
    color: #c3c3c3;
  }
  .stf-id-flx {
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .stf-ar {
    width: auto;
    margin: 0px 0px 0px 0px;
  }
  .stf-ar img {
    width: 45px;
  }
  .wrb-txt h3 {
    text-align: center;
    color: #e8e8e8;
    font-size: 24px;
    line-height: 1.3em;
    letter-spacing: 0em;
  }
}

@media (max-width: 739px) {
  .stf-box1,
  .stf-box2,
  .stf-box3 {
    width: 100%;
    height: auto;
    background-image: none;
  }
  .left-bank {
    display: flex;
    width: 100%;
    height: auto;
    flex-flow: wrap;
    align-items: center;
    padding: 30px;
    /* border: solid 1px #ccc; */
  }
  .rec-title {
    font-size: 21px;
    line-height: 1.5em;
    letter-spacing: 0em;
    color: #c3c3c3;
    margin: 0px 0px 0px 0px;
  }
  .sp-stf-img {
    display: block;
    text-align: center;
    padding: 0;
    opacity: 1;
    width: 100%;
    padding: 20px 0;
  }
  .rec-id {
    display: block;
    width: 100%;
  }
  .stf-flx {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .stf-data {
    display: block;
    color: #c3c3c3;
  }
  .stf-id-flx {
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .stf-name-flx {
    display: block;
    align-items: end;
    justify-content: flex-start;
  }
  .stf-id-2 {
    font-size: 23px;
    line-height: 1.3em;
    letter-spacing: 0em;
    margin: 0px 0px 10px 0px;
  }
  .stf-id-3 {
    font-size: 13px;
    line-height: 1.3em;
    letter-spacing: 0em;
    margin: 0px 0px 0px 0px;
  }
  .stf-ar {
    width: auto;
    margin: 0px 0px 0px 0px;
  }
  .stf-ar img {
    width: 45px;
  }

  .wrb-txt h3 {
    text-align: center;
    color: #e8e8e8;
    font-size: 22px;
    line-height: 1.3em;
    letter-spacing: 0em;
  }
}

@media (max-width: 480px) {
  .flx-wrb {
    display: block;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0px 0px 0px;
  }
  .wrb-txt h3 {
    text-align: center;
    color: #e8e8e8;
    font-size: 30px;
    line-height: 1.3em;
    letter-spacing: 0em;
  }
}

/*--------------------------------------------------------------
# INTERVIEW
--------------------------------------------------------------*/
.pc-gt {
  display: block;
}
.mb-gt {
  display: none;
}

.g-top-image {
  text-align: center;
  background: #1d1d1d;
  margin: 0px 0px 150px 0px;
  position: relative;
}
.g-top-catch {
  position: absolute;
  top: 90px;
  left: 50px;
  text-align: left;
  font-size: 48px;
  line-height: 1.7em;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0px 0px 0px 0px;
}
.g-top-catch-r {
  position: absolute;
  top: 90px;
  right: 50px;
  text-align: left;
  font-size: 48px;
  line-height: 1.7em;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0px 0px 0px 0px;
}
.gt-pos1 {
  text-align: left;
  position: absolute;
  top: 320px;
  left: 50px;
}
.gtx1 {
  font-size: 18px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  color: #fff;
}
.gtx-flx {
  display: flex;
  align-items: baseline;
}
.gtx2 {
  font-size: 23px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0px 10px 0px 0px;
}
.gtx3 {
  font-size: 14px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .pc-gt {
    display: block;
  }
  .mb-gt {
    display: none;
  }

  .g-top-catch {
    position: absolute;
    top: 70px;
    left: 50px;
    text-align: left;
    font-size: 40px;
    line-height: 1.7em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 0px 0px 0px;
  }
  .g-top-catch-r {
    position: absolute;
    top: 70px;
    right: 50px;
    text-align: left;
    font-size: 40px;
    line-height: 1.7em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 0px 0px 0px;
  }
  .gt-pos1 {
    text-align: left;
    position: absolute;
    top: 250px;
    left: 50px;
  }
}
@media (min-width: 740px) and (max-width: 991px) {
  .pc-gt {
    display: block;
  }
  .mb-gt {
    display: none;
  }

  .g-top-catch {
    position: absolute;
    top: 20px;
    left: 40px;
    text-align: left;
    font-size: 28px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 0px 0px 0px;
  }
  .g-top-catch-r {
    position: absolute;
    top: 20px;
    right: 40px;
    text-align: left;
    font-size: 28px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 0px 0px 0px;
  }
  .gt-pos1 {
    text-align: left;
    position: absolute;
    top: 160px;
    left: 40px;
  }
}
@media (max-width: 739px) {
  .pc-gt {
    display: none;
  }
  .mb-gt {
    display: block;
  }

  .g-top-catch {
    position: absolute;
    top: 25px;
    left: 20px;
    text-align: left;
    font-size: 22px;
    line-height: 1.7em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 0px 0px 0px;
  }
  .g-top-catch-r {
    position: absolute;
    top: 25px;
    right: 20px;
    text-align: left;
    font-size: 22px;
    line-height: 1.7em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 0px 0px 0px;
  }
  .gt-pos1 {
    text-align: left;
    position: absolute;
    top: 220px;
    left: 20px;
  }
  .gtx1 {
    font-size: 16px;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    color: #fff;
  }
  .gtx-flx {
    display: flex;
    align-items: baseline;
  }
  .gtx2 {
    font-size: 20px;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 10px 0px 0px;
  }
  .gtx3 {
    font-size: 14px;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .pc-gt {
    display: none;
  }
  .mb-gt {
    display: block;
  }

  .g-top-catch {
    position: absolute;
    top: 15px;
    left: 20px;
    text-align: left;
    font-size: 22px;
    line-height: 1.6em;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0px 0px 0px 0px;
  }
  .gt-pos1 {
    text-align: left;
    position: absolute;
    top: 170px;
    left: 20px;
  }
}

a.ivx-anker {
  display: block;
  margin-top: -150px;
  padding-top: 150px;
}
.iv {
  margin: 0px 0px 150px 0px;
}
.iv-flx-r {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.iv-flx {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.iv-left {
  width: 48%;
}
.iv-title {
  font-size: 32px;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 40px 0px;
}
.iv-txt {
  font-size: 16px;
  line-height: 2.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 30px 0px;
}
.iv-right {
  width: 48%;
}
.iv-stf-image {
  text-align: center;
  margin: 0px 0px 0px 0px;
}

/* わたしの一日 */
.bg5 {
  background: #000;
  padding: 0;
}

.bg-mysc {
  background: #000;
  padding: 100px 150px;
}
.mysc-title {
  text-align: center;
  font-size: 32px;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 40px 0px;
}

.mysc {
  display: block;
  margin: 0px 0px 0px 0px;
}

.mysc-flx {
  display: flex;
  align-items: start;
  margin: 0px 0px 0px 0px;
}
.mysc-box {
  background: url("../img/iv/border.png") repeat-y;
  background-position: 50px 0px;
  padding: 0;
  margin: 0;
}
.mysc-box-last {
  background: none;
  background-position: 50px 0px;
  padding: 0;
  margin: 0;
}

.mysc-left {
  padding: 0px 50px 0px 0px;
}
.mysc-circle {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #d9d9d9;
  border: solid 10px #000;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 80px;
  letter-spacing: 0.1em;
  color: #000;
}

.mysc-right {
}
.mysc-1 {
  font-size: 15px;
  line-height: 1.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 20px 0px;
}
.mysc-2 {
  font-size: 22px;
  line-height: 1.3em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 15px 0px;
}
.mysc-txt {
  font-size: 16px;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  color: #c3c3c3;
  margin: 0px 0px 30px 0px;
}
.mysc-image {
  text-align: center;
  margin: 0px 0px 0px 0px;
}
.mysc-end {
  padding: 0px 0px 100px 0px;
}
.mysc-mb-border {
  display: none;
}

/* ----- Media queries ----- */
@media (min-width: 992px) and (max-width: 1200px) {
}
@media (min-width: 740px) and (max-width: 991px) {
  .iv {
    margin: 0px 0px 100px 0px;
  }
  .iv-title {
    font-size: 25px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #c3c3c3;
    margin: 0px 0px 40px 0px;
  }
  .bg-mysc {
    background: #000;
    padding: 50px 50px;
  }
  .mysc-mb-border {
    display: none;
  }
}

@media (max-width: 739px) {
  .iv {
    margin: 0px 0px 100px 0px;
  }
  .iv-title {
    font-size: 25px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #c3c3c3;
    margin: 0px 0px 40px 0px;
  }
  .iv-flx-r {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .iv-flx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .iv-left {
    width: 100%;
  }
  .iv-right {
    width: 100%;
  }
  .iv-stf-image {
    text-align: center;
    margin: 0px 0px 15px 0px;
  }

  .bg-mysc {
    background: #000;
    padding: 50px 30px;
  }
  .mysc-title {
    text-align: center;
    font-size: 32px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #c3c3c3;
    margin: 0px 0px 40px 0px;
  }
  .mysc-flx {
    display: block;
    align-items: start;
    margin: 0px 0px 0px 0px;
  }
  .mysc-box {
    background: none;
    background-position: 40px 0px;
    padding: 0;
    margin: 0;
  }
  .mysc-box-last {
    background: none;
    background-position: 40px 0px;
    padding: 0;
    margin: 0;
  }

  .mysc-left {
    text-align: center;
    padding: 0px 0px 0px 0px;
    margin: 0;
  }
  .mysc-circle {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: #d9d9d9;
    border: solid 1px #000;
    text-align: center;
    border-radius: 50%;
    font-size: 16px;
    line-height: 75px;
    letter-spacing: 0.1em;
    color: #000;
    margin: 0px 0px 20px 0px;
  }
  .mysc-1 {
    text-align: center;
    font-size: 15px;
    line-height: 1.3em;
    letter-spacing: 0.1em;
    color: #c3c3c3;
    margin: 0px 0px 20px 0px;
  }
  .mysc-end {
    padding: 0px 0px 15px 0px;
  }
  .mysc-mb-border {
    display: block;
    height: 100px;
    background: url("../img/iv/border.png") repeat-y;
    background-position: center 0;
    padding: 0;
    margin: 0px 0px 15px 0px;
  }
}

@media (max-width: 480px) {
  .bg-mysc {
    background: #000;
    padding: 50px 0;
  }
}
a:hover,
a:hover .works-content,
a:hover .works-content .works-title,
a:hover .works-content .works-title-sub,
a:hover .works-content .works-txt,
a:hover .works-content .tt1 {
  color: #56dbe0;
  text-decoration: none !important;
}
::selection {
  background-color: #56dbe0;
  color: #ffffff; /* 選択中の文字色（白が見やすい） */
}

.wks-title:hover {
  color: #56dbe0;
  transition: color 0.3s ease;
}
/*アニメーション中だけテキストに色*/
.in-motion {
  color: #56dbe0;
}

.gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    60deg,
    rgba(86, 219, 224, 1) 0%,
    rgba(9, 9, 121, 0) 100%
  );
  mix-blend-mode: screen;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}
.pt-60 {
  padding-top: 60px;
}