@charset "UTF-8";


/*-------------------------------------------------------

メインビジュアル

----------------------------------------------------------*/
.h2-solidcolor-ttl {
  position: relative;
  width: 100%;
  height: 230px;
  background: #F7F6F0;
}

.h2-solidcolor-ttl h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 34px;
  line-height: 51px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: subpixel-antialiased;
}

@media screen and (max-width: 767px) {
  .h2-solidcolor-ttl {
    height: 165px;
  }

  .h2-solidcolor-ttl h2 {
    font-size: 28px;
  }
}

.overlay-mode {
  overflow-y: scroll;
}


/*-------------------------------------------------------

リードテキスト

----------------------------------------------------------*/
.lead-txt {
  padding-top: 90px;
  padding-bottom: 22px;
  margin: 0 auto;
  padding-left: 5.334%;
  padding-right: 5.334%;
}

.lead-txt p {
  text-align: center;
  line-height: 32px;
  letter-spacing: 0;
  -webkit-font-smoothing: subpixel-antialiased;
}

.annotation {
  font-size: 14px;
  font-weight: bold;
  color: #E06D6D;
  text-align: center;
  margin-top: 36px;
  line-height: 28px;
  letter-spacing: 0;
  -webkit-font-smoothing: subpixel-antialiased;
}

@media screen and (max-width: 767px) {
  .lead-txt {
    padding-top: 80px;
  }

  .fs-16 {
    font-size: 16px;
  }

  .lead-txt p {
    text-align: left;
  }

  .annotation {
    text-align: left;
    margin-top: 80px;
    line-height: 1.5 !important;
  }
}


/*-------------------------------------------------------

仕事相関図

----------------------------------------------------------*/
.soukanzu {
  padding-left: 1.2266%;
  padding-right: 1.2266%;
}

.soukanzu-border {
  border: 1px dashed #000000;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 56px 20px;
  position: relative;
}

.soukanzu-bordernone {
  margin-bottom: 126px;
}

@media screen and (max-width: 767px) {
  .sp_mb-10 {
    margin-bottom: 10px;
  }
}

.colorbox-red ul li p,
.colorbox-yellow ul li p,
.colorbox-green ul li p,
.colorbox-purple ul li p {
  color: #000;
}

.colorbox-red {
  background-color: #F6D3D3;
  padding: 33px 20px 73px 20px;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
}

.colorbox-yellow {
  background-color: #F9EAB7;
  padding: 39px 20px 63px 20px;
  max-width: 550px;
  width: 100%;
}

.colorbox-green {
  background-color: #DBE6BB;
  padding: 39px 12px 63px 12px;
  max-width: 550px;
  width: 100%;
  margin-left: 2%;
}

.colorbox-purple {
  background-color: #D9D3E9;
  padding: 33px 20px 73px 20px;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
}

.colorbox-red li,
.colorbox-yellow li,
.colorbox-green li,
.colorbox-purple li {
  position: relative;
  background-color: #fff;
  width: 150px;
  height: 150px;
  padding-top: 20px;
}

.colorbox-red li+li,
.colorbox-yellow li+li,
.colorbox-green li+li,
.colorbox-purple li+li {
  margin-left: 20px;
}

.colorbox-red li img,
.colorbox-yellow li img,
.colorbox-green li img,
.colorbox-purple li img {
  margin: 0 auto;
}

.colorbox-red li p,
.colorbox-yellow li p,
.colorbox-green li p,
.colorbox-purple li p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-align: center;
  font-weight: bold;
  -webkit-font-smoothing: subpixel-antialiased;
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

@media screen and (max-width: 767px) {

  .colorbox-red li,
  .colorbox-yellow li,
  .colorbox-green li,
  .colorbox-purple li {
    position: relative;
    background-color: #fff;
    width: 114px;
    height: 150px;
    padding-top: 20px;
  }

  .colorbox-red li+li,
  .colorbox-yellow li+li,
  .colorbox-green li+li,
  .colorbox-purple li+li {
    margin-left: 2%;
  }

  .colorbox-red li p,
  .colorbox-yellow li p,
  .colorbox-green li p,
  .colorbox-purple li p {
    font-size: 16px;
    line-height: 20px;
  }
}

@media screen and (max-width: 767px) {

  .colorbox-red li p,
  .colorbox-yellow li p,
  .colorbox-green li p,
  .colorbox-purple li p {
    font-size: 13px;
    position: absolute;
    bottom: 17%;
  }
}

.colorbox-ttl {
  font-size: 22px;
  font-weight: bold;
  line-height: 33px;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: subpixel-antialiased;
  text-align: center;
  color: #000000;
}

.colorbox-txt {
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0;
  -webkit-font-smoothing: subpixel-antialiased;
  text-align: center;
  margin-top: 5px;
  color: #000000;
}

.soukanzu ul {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.mark01 {
  position: absolute;
  top: 336px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

@media screen and (max-width: 1023px) {
  .mark01 {
    top: 348px;
  }
}

.mark01 img {
  margin: 0 auto;
  /*margin-top: -25px;*/
}

.mark02 img {
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .mark01 {
    top: 416px;
  }

  .mark01 img {
    max-width: 90%;
  }
}

.soukanzu-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  /*z-index: -10;*/
}

.arrow01 {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.arrow01 img:first-child {
  position: absolute;
}

@media screen and (max-width: 1170px) {
  .arrow01 {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }

  .arrow01 img {
    max-width: 80%;
  }

  .arrow01 img:first-child {
    left: 5.5px;
  }
}

@media screen and (max-width: 1170px) {
  .colorbox-yellow {
    padding: 33px 1% 73px 1%;
    max-width: 50%
  }

  .colorbox-green {
    padding: 33px 1% 73px 1%;
    max-width: 50%
  }
}

@media screen and (max-width: 767px) {

  .colorbox-red,
  .colorbox-yellow,
  .colorbox-green,
  .colorbox-purple {
    padding: 33px 1.5% 46px 1.5%;
  }
}

@media screen and (max-width: 767px) {
  .soukanzu {
    padding-left: 5.334%;
    padding-right: 5.334%;
  }

  .soukanzu-border {
    padding: 28px 12px 56px 12px;
    position: relative;
  }

  .colorbox-yellow ul,
  .colorbox-green ul {
    align-items: center;
  }

  .colorbox-red li,
  .colorbox-yellow li,
  .colorbox-green li,
  .colorbox-purple li {
    width: 115px;
    height: 115px;
  }

  .colorbox-yellow li+li,
  .colorbox-green li+li {
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .colorbox-ttl {
    font-size: 20px;
  }

  .colorbox-txt {
    display: none;
  }

  .colorbox-yellow ul,
  .colorbox-green ul {
    flex-direction: column;
    align-items: center;
  }

  .colorbox-red li,
  .colorbox-yellow li,
  .colorbox-green li,
  .colorbox-purple li {
    width: 115px;
    height: 125px;
  }

  .colorbox-yellow li+li,
  .colorbox-green li+li {
    margin-left: 0;
    margin-top: 40px;
  }

}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

/*-------------------------------------------------------

関連コンテンツ

----------------------------------------------------------*/
.related-content {
  border-top: 1px solid #707070;
}

.related-content h3 {
  font-size: 26px;
  text-align: center;
  font-weight: bold;
  line-height: 39px;
  letter-spacing: 0.03em;
  color: #000000;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-top: 80px;
}

.related-content__btn {
  padding-top: 46px;
  padding-bottom: 126px;
  max-width: 600px;
  margin: 0 auto;
}

.related-content__btn ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.related-content__btn li {
  max-width: 280px;
}

.related-content__btn li p {
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0;
  color: #444444;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .related-content__btn ul {
    flex-flow: column;
    align-items: center;
  }

  .related-content__btn li+li {
    margin-top: 31px;
  }
}

.lead-txt .gallery_h2-img-ttl {
  padding-top: 230px;
  background-color: #F7F6F0;
}

@media screen and (max-width: 767px) {
  .gallery_h2-img-ttl {
    padding-top: 44vw;
  }
}

.posi-rel {
  position: relative;
}

.mv-txt {
  display: inline-block;
  color: #fff;
  background-color: #EBB912;
  padding: 40px 80px 25px 45px;
  position: absolute;
  right: 0;
  bottom: -110px;
  -webkit-font-smoothing: subpixel-antialiased
}

.mv-txt span {
  margin-left: 13px;
  font-weight: 700;
}

.mv-txt__wrapper {
  display: flex;
}

@media screen and (max-width: 767px) {
  .mv-txt {
    padding: 30px;
    bottom: -180px;
  }

  .mv-txt__wrapper {
    flex-direction: column;
  }
}

.mv-txt img {
  padding-bottom: 10px;
}

.mv-txt_ttl {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
}

.mv-txt__occupation {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  padding-top: 10px;
  margin-top: 22.8px;
  border-top: 1px solid #fff;
}

.mv-txt__year {
  display: inline-block;
  padding-top: 34px;
  margin-left: 16px;
}

@media screen and (max-width: 767px) {
  .mv-txt img {
    width: 159.63px;
  }

  .mv-txt_ttl {
    font-size: 18px;
  }

  .mv-txt__occupation {
    font-size: 16px;
    margin-top: 15px;
    width: fit-content;
  }

  .mv-txt__year {
    padding-top: 0;
    margin-left: 0;
  }
}

/*-------------------------------------------------------


----------------------------------------------------------*/

.gallery_mv-txt {
  display: inline-block;
  color: #000;
  padding: 42px 52px 38px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
  .gallery_mv-txt {
    width: 100%;
  }
}

.gallery-maintxt {
  text-align: center;
  color: #000;
  line-height: 2;
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  .gallery-maintxt {
    text-align: left;
    font-size: 16px;
    padding: 0 5%;
    margin-top: 216px;
  }
}

.gallery-maintxt p {
  padding-top: 30px;
}

@media screen and (max-width: 767px) {
  .gallery-maintxt p:first-child {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .gallery_mv-txt img {
    width: 75%;
    margin: 0 auto;
  }
}

.gallery_mv-txt_ttl_01 {
  font-size: 28px;
  font-weight: bold;
  padding-bottom: 15px;
}

.gallery_mv-txt_ttl_02 {
  font-size: 16px;
  font-weight: bold;
  padding-top: 15px;
}

@media screen and (max-width: 767px) {
  .gallery_mv-txt_ttl_01 {
    font-size: 28px;
    padding-bottom: 10px;
  }

  .gallery_mv-txt_ttl_02 {
    font-size: 14px;
    padding-top: 10px;
  }
}

* 矢印用スタイル */ .prev-arrow,
.next-arrow {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  font-weight: bold;
}

.prev-arrow {
  left: -20px;
}

.next-arrow {
  right: -20px;
}



/*----------------------
modal
-------------------------*/

.modal-white {
  background-color: #FFF;
}

.modal-red {
  background-color: #FBE9E9;
}

.modal-yellow {
  background-color: #faf0cc;
}

.modal-green {
  background-color: #e9f0d5;
}

.modal-purple {
  background-color: #ECE9F4;
}

.modal-overlay {
  z-index: 500;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .7)
}

.modal-content {
  position: fixed;
  display: none;
  width: 1000px;
  max-height: 82vh;
  margin: 50px 4% 0;
  overflow-y: scroll;
  z-index: 999;
}

.modalContentWrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 70px 0 50px;
}

.modalContentWrap .modalTitle {
  display: flex;
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: solid 1px #4b4948;
}

.modalContentWrap .modalTitle p {
  font-size: 26px;
  font-weight: bold;
  margin-top: -10px;
  margin-left: 20px;
  line-height: 1.5;
  color: #000;
}

.modalContentWrap .modalTitle p span {
  font-size: 16px;
}

.modalContentWrap .modalTitle img {
  background-color: #fff;
  padding: 12px;
  width: 68px;
}

.modalContentWrap dl {
  line-height: 2;
}

.modalContentWrap dl dt {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  color: #000;
}

.modalContentWrap dl dd {
  margin-bottom: 30px;
}

@media screen and (max-width:767px) {
  .modalContentWrap dl dd {
    font-size: 16px;
  }

  .dd-mt15 {
    margin-top: 15px;
  }
}









.interview li {
  display: flex;
  border-top: solid 1px #4b4948;
}

.interview li a {
  display: inherit;
}

.interview li p {
  font-size: 12px;
  padding: 10px;
  color: #000;
  line-height: 1.5;
}

.interview li span {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.interview li img {
  width: 96px;
  height: 81px;
}

.modal-content .close-link {
  position: absolute;
  top: 15px;
  right: 15px;
}

.modal-content .modal-close {
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.modal-content ul {
  display: flex;
  justify-content: space-between;
  /*max-width: 100px;*/
  margin: 0 auto 50px;
}

.modal-content ul.j-start {
  display: flex;
  justify-content: start;
  gap: 10px;
  margin: 0 auto 50px;
}

.modal-content .modal-box {
  max-width: 160px;
}

@media screen and (max-width:767px) {
  .modal-content .modal-box {
    max-width: 100px !important;
  }
}

/*.modal-content ul a .prev{
    position: relative;
}

.modal-content ul a .prev:after{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    content: "＜"
}

.modal-content ul a .next{
    position: relative;
}

.modal-content ul a .next:after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    content: "＞"
}*/

@media screen and (max-width:767px) {
  .modal-content .interview {
    display: block;
    margin-bottom: 0;
  }

  .modal-content ul.j-start {
    flex-direction: column;
    gap: 0;
  }

  .interview li {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 1024px) {

  .modal-open:hover {
    cursor: pointer;
  }

  .modal-open:hover .arrow01 img:first-child {
    opacity: 0;
  }
}

@media screen and (max-width:1023px) {
  .modal-content {
    max-width: 92%;
    margin-top: 200px;
    margin-bottom: 100px;
  }

  .modalContentWrap {
    padding: 50px 5.79% 20px;
  }
}

@media screen and (max-width:767px) {
  .modalContentWrap .modalTitle {
    font-size: 4vw;
  }

  .modal-content {
    height: 130vw;
  }
}

.modal-box {
  max-width: 100px;
  position: relative
}

.modal_link_left {
  position: absolute;
  right: 400px;
  cursor: pointer;
}

.modal_link_right {
  position: absolute;
  left: 400px;
  cursor: pointer;
}

.modal_link_center {
  max-width: 173px !important;
  position: absolute;
  left: -20px;
  cursor: pointer;
}

.modal_link_black {
  position: absolute;
  left: 30px;
  top: -30px;
}

@media screen and (max-width:767px) {
  .modal_link_left {
    right: 38.4vw;
  }

  .modal_link_right {
    left: 37.4vw;
  }

  .modal_link_center {
    left: -10.2vw;
    width: 50vw;
  }
}

@media screen and (max-width:734px) {
  .modal_link_left {
    width: 45%;
  }

  .modal_link_right {
    width: 45%;
  }

  .modal_link_center {
    width: 130%;
    left: -5.5vw;
    bottom: 2.5vw;
  }
}

@media screen and (min-width:768px) {
  .serviceflex {
    display: flex;
    justify-content: center;
  }

  .serviseflex_2nd {
    margin-left: 20px;
  }
}

@media screen and (max-width:767px) {
  .serviseflex_2nd {
    justify-content: space-around;
  }

  .serviseflex_2nd li {
    margin: 20px 20px 0;
  }
}

/*@media screen and (max-width: 1078px) {
.serviseflex_2nd {
    margin-left: 5px;
}
}*/


.dashed_border {
  border-top: 1px dashed #C1C1C1;
  padding-top: 30px;
}

.fs-01 {
  font-size: 20px;
}

.fs-02 {
  font-size: 18px !important;
}

@media screen and (max-width:767px) {
  .fs-01 {
    font-size: 18px;
  }
  
  .fs-02 {
    font-size: 16px !important;
  }
}