@charset "UTF-8";

/* style */
body{
    background-color: #EEEEEE;
    color: #212529;
    font-size: clamp(15px, 1.4vw, 20px);
}
main{
    overflow: hidden;
}
ul{
    list-style: none;
}
.row{
    padding: 0;
}
section{
    margin-top: 150px;
    position: relative;
    @media (max-width: 576px) {
        margin-top: 50px;
    }
}
h1,h2,h3,h4{
    position: relative;
    font-weight: bold; 
}
h5{
   color: #CCCCCC;
}
h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h1::before {
  content: "";
  position: absolute;
  top: -30px;
  background-color: #1E2A6F;
  height: 13px;
  width: 180px;
}
@media (max-width: 576px) {
  h1::before {
    top: -20px;
    height: 7px;
    width: 100px;
  }
}



/* スライダー */
    .main-visual{
        position: relative;
        padding-left: 15%;
        padding-right: 15px;
    }
    .slick {
      object-fit: cover;
      padding: 0;
    }
    .slick img {
      margin-left: auto;
    }
    div.scrolldown{
        position: absolute;
        font-size: 14px;
        writing-mode: vertical-rl;
        left: 11.5%;
        top: 50px;
    }

/* ヘッダー */
    .header-nav li a {
      text-decoration: none;
      color: #212529;
    }
    /*.header-nav li a:hover {
      border-bottom: 1px solid #212529;
    }*/
    .header-nav li a.contact_header:hover {
      border: none;
    }
    .header-nav li a.contact_header div {
      background-color: #B5DAEA;
      padding: 10px;
      border-radius: 50%;
    }
    .header_drop {
        display: none; 
    }
    .header_drop.show{
        display: block;
    }

    @media (min-width: 768px){
        .header_drop.show{
            position: absolute;
            background-color: #f8f8f8;
            z-index: 100;
        }
        .header_drop.show ul{
            padding-left: 0;
        }
    }


    @media (max-width: 768px){
        .header-nav{
            padding: 40px 0;
        }
        .header-nav li {
          font-size: 1.5rem;
          border-top: 1px solid #323CB4;
          padding: 10px 20px;
        }
        .header-nav li:first-child {
          border-top: none;
        }
        .header-nav li a, .header-nav li span {
          color: #ffffff;
          padding: 4px 0;
          font-size: 20px;
        }
        .header-nav li a:hover, .header-nav li span:hover {
          border-bottom: none;
        }
        .header-nav li .arrow {
          position: relative;
        }
        .header-nav li .arrow::after {
          content: "";
          position: absolute;
          top: 10px;
          right: 0px;
          width: 10px;
          height: 10px;
          border-top: 1px solid #fff;
          border-right: 1px solid #fff;
          transform: rotate(135deg);
        }
        .header-nav .active .arrow {
          position: relative;
        }
        .header-nav .active .arrow::after {
          transform: rotate(-45deg);
        }

        .menu_sub {
          padding-left: 0;
          border-top: 1px solid #323CB4;
        }
        .menu_sub a {
          font-size: 18px !important;
        }

        .footer-jpb {
          display: none;
        }
    }
         

/* ボタン */
    .btn-light {
      position: relative;
      color: #1E2A6F !important;
      border-radius: 9999px;
      width: 200px;
      font-weight: bold;
      transition: 0s;
    }
    .btn-light .row {
      justify-content: space-between;
      padding: 0 20px;
    }

    @media (max-width: 576px) {
      .btn-light {
        max-width: 200px;
        width: 100%;
      }
      .btn-light .row {
        padding: 5px 30px;
      }
    }
    .dli-arrow-right::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        width: 17px;
        height: 18px;
        background-image: url(../img/common/arrow-blue.svg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        transform: translateY(-50%);
    }


/* アドテックとは */
    section.adtec {
      z-index: 1;
      text-align: center;
      position: relative;
    }
    section.adtec .btn-light {
      background: none;
      border: none;
      text-align: right;
    }
    .adtec_text{
        margin: 100px auto;
        max-width: 850px;
        text-align: left;
    }
    section.adtec::after{
        content: "";
        position: absolute;
        background: url(../img/home/decoration_01.png) no-repeat;
        background-size: contain;
        left: -110px;
        top: 30%;
        width: 45%;
        height: calc(350 / 1200 * 100vw);
        z-index: -1;
        margin: 0 calc(50% - 50vw);
    }


    @media (max-width: 576px) {
      section.adtec::after {
        display: none;
      }
    }
    @media (max-width: 576px) {
      .adtec {
        margin-top: -80px;
      }
      .adtec h1 {
        text-align: left;
      }
      .adtec .adtec_inner {
        padding: 0;
        margin-right: 0;
      }
      .adtec .adtec_text {
        margin: 30px auto;
      }
      .adtec .adtec_inner {
        width: 90%;
        background-color: #EEEEEE;
        padding: 65px 50px 0 50px;
      }
      .adtec .youtube_img {
        width: 80%;
      }
    }

/* 事業内容 */
    .service {
/*        margin-top: 100px;
*/        max-width: 1400px;
        margin: 150px auto 300px;
      }
    @media (max-width: 576px) {
      .service {
        margin: 100px auto;
      }
    }
    .service .service_img01 {
      right: 0;
      text-align: right;
    }
    .service .service_img02 {
      left: 0;
    }
    .service .btn-light {
      margin: 30px auto 30px 0;
    }
    .service_img01 , .service_img02 { 
        position: absolute;
            img {
/*                margin: 0 calc(50% - 34vw);
*/                width: 100%;
            }
    }
    .surveying{
        margin-bottom: 180px;
        align-items: flex-end;
    }
    .consultant{
        flex-flow: column-reverse;
        align-items: flex-end;
    }
    :is(.adtec_story,.recruit) h1::before{
        background-color: #FFFFFF;
    }

    @media (max-width: 991px) {
      .service .service_img01, .service .service_img02 {
        position: relative;
        text-align: center;
        margin-top: 50px;
      }
      .service .service_img01 img, .service .service_img02 img {
        margin: unset;
      }
      .service .surveying, .service .consultant {
        justify-content: center;
      }
      .service .surveying .btn-light, .service .consultant .btn-light {
        margin: 20px auto 20px 0;
      }
      .service .consultant {
        flex-flow: column-reverse;
      }
    }
    @media (max-width: 520px) {
      .surveying, .consultant {
        display: none;
      }
    }


/* アドテックストーリー */
    section.adtec_story::before {
        content: "";
        position: absolute;
        background: url(../img/home/decoration_02.png) no-repeat;
        background-size: contain;
        right: 0;
        width: 40%;
        height: calc(300 / 1200 * 100vw);
        z-index: 1;
        top: -200px;
        
    }
    @media (max-width: 520px) {
        section.adtec_story::before {
            top: -30px;
        }
    }
    section.adtec_story::after{
        content: "";
        position: absolute;
        background: url(../img/home/decoration_03.png) no-repeat;
        background-size: contain;
        left: 0;
        bottom: -160px;
        width: 30%;
        height: calc(350 / 1200 * 100vw);
        z-index: 1;
        margin: 0 calc(50% - 50vw);
    }
    @media (max-width: 520px) {
        section.adtec_story::after {
            bottom: -20px;
        }
    }

    .adtec_story svg{
        position: absolute;
        left: 0;
        bottom: -1px;
    }
    .adtec_story_text{
        margin-left: 100px;
    }
    .adtec_story {
      height: 1300px;
      margin: 200px calc(50% - 50vw);
      background-color: #1E2A6F;
      position: relative;
      color: #FFFFFF;
      z-index: 0;
    }

    @media (max-width: 520px) {
      .adtec_story {
        margin: 100px calc(50% - 50vw);
      }
    }
    .absonsive {
      position: absolute;
      right: 0;
      top: 0px;
      z-index: -1;
      width: 60%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .adtec_story h1 {
      margin-top: 50px;
    }

    .adtec_story .adtec_story_inner {
      position: relative;
      transform: translate(0%, 150px);
      z-index: 10;
    }             
    .adtec_story_catch{
            width: fit-content;
            margin: 120px 30px 70px 80px;
        }
    .adtec_story_catch_inner{
        display: inline-block;
        font-size: 48px;
        font-weight: bold;
        background-color: #B5DAEA;
        color: #212529;
        padding: 15px;
        margin-bottom: 10px;
        line-height: 1;
    }
    .adtec_story_text{
        max-width: 460px;
    }


    @media (max-width: 1200px) {
        .absonsive {
            height: calc(600 / 1200 * 100vw);
        }
    }
    @media (max-width: 991px) {
        .adtec_story {
          height: 880px;
        }
        .adtec_story img {
          margin-top: 100px;
        }
        .adtec_story .adtec_story_inner {
          transform: translate(0%, 20%);
        }
        .adtec_story .adtec_story_inner h1{
            margin-top: 0;
            margin-bottom: 50px;
        }
        .adtec_story_text{
            margin-left: unset;
            max-width: 460px;
        }
        .adtec_story_catch{
            margin: 20px 0;
        }
        
        .adtec_story_catch_inner{
            font-size: 18px;
            padding: 5px;
        }
        .adtec_story_inner::before {
            top: -180px;
        }
    }  
    @media (max-width: 575px) {
        .adtec_story_text{
            margin: auto;
            .btn{
                margin: auto;
            }
        }
    }


/* インスタグラム */
    .instagram {
      text-align: center;
    }
    .instagram .instagram_logo {
      justify-content: center;
      align-items: baseline;
      margin-bottom: 80px;
    }
    .instagram h1 {
      letter-spacing: 0.3rem;
    }
    .instagram h1::before {
      top: -15px;
    }
    .instagram-list{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }
    .instagram-list .img{
        width: 100%;
        height: 280px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    @media (max-width: 991px) {
      .instagram-list .img {
        height: 180px;
      }
    }
    @media (max-width: 768px) {
      .instagram-list .img {
        height: 100px;
      }
    }
    @media (max-width: 576px) {
      .instagram-list {
        width: unset;
      }
      .instagram-list li {
        margin: 10px;
      }
      .instagram-list.container {
        padding: unset;
      }

      .instagram-list li {
        margin: 10px;
      }

      .instagram-list.container {
        padding: unset;
      }

      .instagram-list .img {
        height: 180px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }

      .slick-prev, .slick-next {
        display: none;
      }
    }


/* 採用情報 */
    .recruit_inner {
      color: #FFFFFF;
      position: absolute;
      width: 30%;
      top: 30%;
      z-index: 10;
    }
    .recruit_inner h1::before {
      background-color: #BADFF3;
    }
    .recruit_inner h5 {
      color: #249892;
    }
    .recruit_inner p {
      margin: 30px 0;
    }
    .recruit_inner .btn-light {
      background-color: #BADFF3;
      border: none;
    }
    .recruit_inner {
      color: #FFFFFF;
      position: absolute;
      width: 30%;
      top: 30%;
      z-index: 10;
    }
    .recruit_inner h1::before {
      background-color: #BADFF3;
    }
    .recruit_inner h5 {
      color: #249892;
    }
    .recruit_inner p {
      margin: 30px 0;
    }
    .recruit_inner .btn-light {
      background-color: #BADFF3;
      border: none;
    }

    .recruit_img01 {
      margin: 0 calc(50% - 50vw);
    }
    .recruit_img01 img {
      width: 100%;
    }

    @media (max-width: 991px) {
      .recruit_inner {
        width: 40%;
      }
      .recruit_inner p {
        margin: 50px 0;
      }
    }
    @media (max-width: 576px) {
      .recruit_inner {
        width: 80%;
        top: 25%;
      }
    }

/* 会社概要 */
    .company .btn-light{
        margin: 20px 0;
    }
    @media (max-width: 576px) {
        .company .btn-light{
            margin: 35px 0;
        }
    }
    .company_list{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1rem;
        padding-left: 0;
        li{
          margin-bottom: 30px;
        }

    }
    .dropdown_1,.dropdown_2,.dropdown_3{
        display: block;
    }


    .map_button{
        display: inline-block;
        font-size: x-small;
        margin: 0;
        padding: 0 15px 0 5px;
        width: 55px;
        text-align: left;
    }
    .map_button .dli-arrow-right::before{
        width: 10px;
        height: 10px;
        right: 6px;
    }

    @media (max-width: 576px) {
      .map_button {
        border: unset;
      }
      .map_button .dli-arrow-right {
        transform: rotate(-45deg);
      }

      h4 {
        margin: 0;
        font-size: 20px;
      }

      .company_list {
        display: block;
        margin-top: 30px;
      }
      .company_list li {
        position: relative;
        border-top: 1px solid;
        padding: 20px 45px 20px 10px;
      }
      .company_list li:last-child {
        border-bottom: 1px solid;
      }
      .company_list label {
        position: absolute;
        right: 15px;
        top: 15px;
        text-align: right;
        margin: 0;
      }
      .company_list label:hover {
        text-decoration: none;
      }

      .dropdown_1, .dropdown_2, .dropdown_3 {
        display: none;
      }
    }
        
 /* 開閉アイコン */
    .btn-link[aria-expanded="false"]:after {
        display: block;
        content: " ";
        width: 15px;
        height: 15px;
        border-top: solid 2px #212529;
        border-right: solid 2px #212529;
        transform: rotate(135deg);
    }
    
    .btn-link[aria-expanded="true"]:after {
        content: " ";
        display: block;
        width: 15px;
        height: 15px;
        border-top: solid 2px #212529;
        border-right: solid 2px #212529;
        transform: rotate(-45deg);
    }


/* フッター */
    footer {
/*      height: 500px;
*/      margin-top: 50px;
      background-color: #1E2A6F;
      color: #FFFFFF;
    }
    footer .header-nav {
      justify-content: flex-start;
    }
    footer .header-nav li{
        padding-right: 50px;
        margin-right: 50px;
        border-right: 1px solid #fff;
    }
    footer .header-nav li:last-child{
        border-right: none;
        padding-right: 0px;
        margin-right: 0px;
    }
    footer .header-nav a {
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
      padding-bottom: 0;
      color: #FFFFFF;
      
    }
    @media (max-width: 768px) {
        footer .header-nav li{
            border-right: none;
            margin-right: 0;
        }
    }
    
    /*footer .header-nav a::after {
      content: "|";
      padding: 0 1rem;
    }*/
    footer .header-nav li:last-child a::after {
      content: none;
    }
    .footer-jpb{
        margin-bottom: 100px;
    }
    .footer-jpb p{
        margin-bottom: 0;
    }
    .footer-jpb p a{
        font-size: 18px;
        color: #fff;
    }
    ul.row{
        justify-content: space-between;
        padding: 50px 15px;
    }
    
    .contact_footer {
      background-color: #BADFF3;
      color: #212529;
      font-weight: bold;
      border-radius: 9999px;
      width: 200px;
      text-align: center;
      padding: 13px 45px;
      text-decoration: none !important;
      transition: 0.2s;
    }
    .contact_footer:hover {
      opacity: 0.8;
      transition: 0.2s;
      color: #212529;
    }

    .contact_footer::before {
      content: "";
      background-image: url(../img/common/email01.svg);
      background-size: 100%;
      background-repeat: no-repeat;
      width: 28px;
      height: 21px;
      display: inline-block;
      vertical-align: text-bottom;
      margin-right: 10px;
      position: relative;
      
    }
    @media (max-width: 768px) {
      .contact_footer::before {
        top: 4px;
        width: 20px;
        height: 19px;
      }
      
    }

    .privacy {
      border-top: 1px solid;
      padding-top: 50px;
      padding-bottom: 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .privacy a {
      color: #fff;
    }

    .privacy a {
      color: #fff;
    }
    

    @media (max-width: 768px) {
      footer {
        height: 100%;
        padding: 20px 0;
      }
      footer .footer_pc {
        display: none;
      }
      footer .header-nav a:hover {
        text-decoration: none;
      }
      footer .header-nav a::after {
        content: none;
      }
      footer ul.row {
        justify-content: space-between;
        padding: 50px 0;
        margin: 0 auto;
      }
      footer .privacy {
        border-top: none;
        display: block;
        text-align: right;
      }
      footer .privacy .d-flex {
        justify-content: space-between;
      }
      footer .contact_footer {
        margin: 20px auto 0;
        width: 300px;
      }
    }


/* ハンバーガー */
    .header-logo img{
        height: calc(41 / 991 * 100vw);
        min-height: 30px;
        max-width: 283px;
    }
    .header-nav{
        font-size: clamp(14px, 1.4vw, 20px);
    }
    @media (min-width: 992px) {
        
        .header-inner {
            margin-right: auto;
            margin-left: auto;
            max-width: 1400px; 
            }
    }
    .header-inner h1::before{
        content: none;
    }

    .header-button-container{
        top: 20px;
            
    }
    .header-button-container button{
        background-color: unset;
        outline: none;
    }
    .button {
        position: relative;
        z-index: 100;
        right: 16px;
        height: 24px;
        width: 36px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }
    .button-bar {
        display: block;
        content: "";
        width: 100%;
        height: 1px;
        background: #333333;
    } 
    .button-bar::before,
    .button-bar::after {
        display: block;
        position: absolute;
        content: "";
        width: 100%;
        height: 1px;
        background: #333333;
        transition: 0.3s ease;
    }
    .button-bar::before {
        top: 0;
    }
    .button-bar::after {
        bottom: 0;
    } 

    #header-inn.active .button-bar {
      display: block;
      content: "";
      width: 100%;
      height: 0px;
      background: #fff;
    }
    #header-inn.active .button-bar::before,
    #header-inn.active .button-bar::after {
      display: block;
      position: absolute;
      content: "";
      width: 100%;
      height: 1px;
      background: #fff;
      transition: 0.3s ease;
    }
    #header-inn.active .button-bar::before {
      top: 10px;
      transform: rotate(45deg);
    }
    #header-inn.active .button-bar::after {
      bottom: 13px;
      transform: rotate(-45deg);
    }

    #header-inn .header-logo{
        display: flex;
    }
    #header-inn .header-logo-sp{
        display: none;
    }
    
    #header-inn.active .header-logo{
        display: none;
    }
    #header-inn.active .header-logo-sp{
        display: block;
    }

  /*     
    .button.is-active .button-bar {
        height: 0;
    }
    .button.is-active .button-bar::before {
    opacity: 1;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    transition: 0.3s ease;
  }
  
  .button.is-active .button-bar::after {
    opacity: 1;
    top: 50%;
    transform: rotate(-45deg) translateY(-50%);
    transition: 0.3s ease;
  } */


.main-catch{
    position: absolute;
    top: 80px;
    right: 150px;
    display: flex;
    align-items: flex-start;
    
}
.main-catch-01{
    display: block;
    position: relative;
    overflow: hidden;
}
.main-catch-02{
    display: block;
    position: relative;
    top: 70px;
    padding: 0 50px  0 25px;
    overflow: hidden;
}
.main-catch-03{
    display: block;
    position: relative;
    top: 140px;
    padding: 0 25px 0 50px;
    overflow: hidden;
}
.main-catch-04{
    display: block;
    position: relative;
    top: 210px;
    overflow: hidden;
}
.slide-in_inner{
    display: block;
}
@media (max-height: 900px) {
    .slide-in_inner img{
        width: 30px;
    }
}


.upAnime{
    opacity: 0;/* 事前に透過0 にして消しておく*/
}

.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:1.2s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-in-out;
    transform: translateY(100%);
    opacity: 1;
}
.upAnimeInner-01{
    animation-name:slideTextY-100;
    animation-duration:1.6s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-in-out;
    transform: translateY(100%);
    opacity: 1;
}
.upAnimeInner-02{
    animation-name:slideTextY-100;
    animation-duration:1.3s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-in-out;
    transform: translateY(100%);
    opacity: 1;
}

@keyframes slideTextY-100 {
    from {
    transform: translateY(200%);/* 要素を下の枠外に移動*/
    opacity: 1;
    }
    to {
    transform: translateY(0);/* 要素を元の位置に移動*/
    opacity: 1;
    }
}
@keyframes slideTextY-200 {
    from {
    transform: translateY(100%);/* 要素を下の枠外に移動*/
    opacity: 1;
    }
    to {
    transform: translateY(0);/* 要素を元の位置に移動*/
    opacity: 1;
    }
}

.js-fade {
/*    display: inline-block;
*/    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.js-fade-left {
      opacity: 0;
      visibility: hidden;
      transform: translateX(50px);
      transition: opacity 1s,visibility 1s, transform 1s;
  }
  
  .scroll-left {
      opacity: 1;
      visibility: visible;
      transform: translateX(0px);
  }

  .js-fade-right {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50px);
        transition: opacity 1s,visibility 1s, transform 1s;
    }
    
    .scroll-right {
        opacity: 1;
        visibility: visible;
        transform: translateX(0px);
    }


h1.js-fade::before {
  width: 0px;
  transition-duration: 0.8s;
  transition-delay: 0.4s;
}
@media (max-width: 576px) {
  h1.js-fade::before {
    width: 100px;
  }
}

h1.scroll::before {
  width: 180px;
}
@media (max-width: 576px) {
  h1.scroll::before {
    width: 100px;
  }
}

.btn-sky{
    background-color: #B5DAEA!important;
    border: 1px solid #B5DAEA;
}
.btn-sky:hover{
    opacity: 0.8;
}

body.page .company__detail dl dd .table-company {
  max-width: 700px;
}