@charset "UTF-8";
/* A Modern CSS Reset */

*{
  color:white;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight:500;
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  scroll-behavior: smooth;
}

.grecaptcha-badge {
  z-index: 999;
}


.en{
font-family: "helvetica-lt-pro", sans-serif;
font-style: normal;
}


.wrapper{
  margin: 0 auto;
}


/*色の指定*/
.bg_main{
  background-color: #2a2a2a;
}

.white{
  color: #ffffff;
}

.bg_white{
  background-color: #ffffff;
}

.bg_black{
  background-color: #191919;
}

.black{
  color: #000000;
}


.bg_gray{
  background-color: #373737;
}

.gray{
  color:#404040;
}

.bg_red{
  background-color: #D7000F;
}

.red{
  color: #D7000F;
}

.s{
  font-size: 20px;
}

.m{
  font-size: 24px;
}

.l{
  font-size: 32px;
}

.xl{
  font-size: 40px;
}

.xxl{
  font-size:100px;
}

h2{
  font-size: 32px;
  font-weight: bold;
}

.title .en{
  font-size: 200px;
  line-height: 100%;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #6d6d6d;
}

.title .child{
  bottom: -10px;
  right: -100px;
  transform: rotate(7deg);
  height: 200px;
  width: auto;
  background-color: transparent;
}

.border{
  border: solid 1px #393939;
}


.border_bottom{
  border-bottom: solid 1px #393939;
  width: 100%;
}



.inner{
  width: 90%;
  max-width: 1200px;
  padding: 160px 40px;
  margin: 0 auto;
}

.copyright{
  padding: 16px 0;
}

.hidden{
  overflow: hidden;
}
.lineheight{
  line-height: 240%;
}

/*footer*/
footer{
  text-align: center;
  width: 100%;
}

h2:before {
    background-color: white;
    content: "";
    height: 1px;
    width: 40px;
}

h2.black:before {
    background-color: #000000;
    content: "";
    height: 1px;
    width: 40px;
}

.ig img{
  width: 45px;
}

.ig{
  width: 45px;
  display: inline-block;
}


.btn{
  position: relative;
  display: block;
  padding: 16px 52px 16px 16px;
  border: solid 1px #ffffff;
}

.btn a::before {
  content: '→';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 22px;
  height: 22px;
  margin: auto;
  border-radius: 20px;
  background-color: #fff;
  color: #000000;
  text-align: center;
}

header .box{
  width: 100%;
}

header .box ul{
  padding:0 0 40px 40px;
}

/*fv*/
.catch_copy , .catch_copy span{
  font-size: 150px;
  top:80px;
  left: 120px;
  line-height: 120%;
}

.mv .dot{
  bottom: -59px;
  left: -80px;
  width: 500px;
  z-index: -1;
}

.mv{
  overflow: hidden;
}


.mv .scroll {
    position: absolute;
    bottom: 45%;
    right: 10%;
    width: 166px;
    height: 166px;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
}

.mv .scroll::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: inline-block;
    width: 23px;
    height: 23px;
    background-image: url(img/scroll_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: top .4s;
    transition: top .4s
}

.mv .scroll:hover {
    cursor: pointer;
    -webkit-transform: scale(1.07);
    transform: scale(1.07)
}

.mv .scroll:hover::before {
    -webkit-animation: .4s ease-in-out rotation_arrow;
    animation: .4s ease-in-out rotation_arrow
}

.scroll_bg{
  -webkit-animation: 15s linear infinite rotation;
    animation: 15s linear infinite rotation;
    background-image: url(img/scroll_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 166px;
    height: 166px
}

@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotation_arrow {
    0% {
        top: 50%
    }

    25% {
        top: 105%;
        opacity: 0
    }

    74% {
        opacity: 0
    }

    75% {
        top: -5%;
        opacity: 1
    }

    100% {
        top: 50%
    }
}

@keyframes rotation_arrow {
    0% {
        top: 50%
    }

    25% {
        top: 105%;
        opacity: 0
    }

    74% {
        opacity: 0
    }

    75% {
        top: -5%;
        opacity: 1
    }

    100% {
        top: 50%
    }
}

.catch_copy span {
  transition: 1s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}
.catch_copy span:first-child {
  animation: catch_anime 1s forwards 0.5s;　
}
.catch_copy span:nth-child(2) {
  animation: catch_anime 1s forwards 1s;
}
.catch_copy span:nth-child(3) {
  animation: catch_anime 1s forwards 1.5s;
}

@keyframes catch_anime {
  0% {
    transform: translateY(20px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*about*/
/*video {
    width: 100%;
    vertical-align: bottom;
}

.video .child{
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
}
.video_content .logo {
    width: 12vw;
    margin-bottom: 40px
}*/
.video {
    --scroll-length: 1.5;
    height: 100vh;
    width: 100%;
    background: #f5f5f5;
    position: relative;
}

.video .inner2 {
    --scale: calc(.8 + (.2*var(--scroll-length)*var(--visible-y)));
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
    overflow: hidden;
    will-change: transform;
    transform: scale(var(--scale));
    width: 100%;
    height: 100vh;
    margin: 0;
    top: 0;
    left: 0
}

.video .inner2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000;
    opacity: calc(var(--visible-y))
}

.video video {
    display: block;
    will-change: transform;
    transform: scale(calc(1/var(--scale)));
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.video_content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: .2s linear;
    /*opacity: 0*/
}

.video_content[data-scroll=in] {
    opacity: calc(var(--visible-y));
}

.video_content .logo {
    width: 12vw;
    margin-bottom: 40px;
}

@media only screen and (max-width: 1024px) {
    .video_content .logo {
        width:30vw;
        margin-bottom:16px;
    }
}

.video_content .lead {
    color: #fff;
    text-align: center;
    font-size: 17px
}

@media only screen and (max-width: 1024px) {
    .video_content .lead {
        font-size:13px;
        padding: 0 40px
    }
}

@media only screen and (min-width: 768px) and (max-width:1024px) {
    .video_content .lead {
        font-size:16px
    }
}

/*#p-home-kv__video__cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(//hikes.jp/wp-content/themes/hikes/assets/css/../video/poster.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    top: 0;
    left: 0
}*/

@supports (-ms-ime-align:auto) {
    #p-home-kv__video {
        height: auto
    }
}


/*service*/
.service .inner , .company .inner , .instagram .inner , footer .inner{
  border-right: solid #393939 1px;
  border-left: solid #393939 1px;
}

header .inner{
  height: 100%;
}

.service .s-dot1{
  width: 260px;
  top:0;
  left:0;
  z-index: -1;
}

.service .s-dot2{
  width: 520px;
  top:380px;
  right:0;
  z-index: -1;
}

.absolute_bg {
  position: absolute;
  top: 480px;
  right: -40px;
  background-color: #373737; /* 背景色 */
  padding-top: 1000%;        /* 擬似的な高さ */
  width: 50%;
}

/*.service .inner:before , .company .inner:before , .instagram .inner:before ,footer .inner:before , header .inner:before{
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        width: 1px;
        margin-left: -2px;
        height: 100%;
        background-color: #393939;
        z-index: -1;
      }
*/

.biography .inner , .contact .inner{
  border-right: solid #D8D8D8 1px;
  border-left: solid #D8D8D8 1px;
}

/*.biography .inner:before , .contact .inner:before {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        width: 1px;
        margin-left: -2px;
        height: 100%;
        background-color: #D8D8D8;
        z-index: -1;
      }*/
/*service*/


.service_img .parent{
  z-index: 3;
}



.red1{
  width: 580px;
  max-width: 80%;
  bottom: -80px;
  left: -100px;
  z-index: 2;
}

.service .dot1{
  width: 520px;
  max-width: 100%;
  bottom: 80px;
  left: -180px;
  z-index: 1;
}

.red2{
  width: 360px;
  top: 80px;
  right: -100px;
  z-index: 2;
}

.service .dot2{
  width: 520px;
  max-width: 100%;
  top: -160px;
  right: -40px;
  z-index: 1;
}

.parent{
  z-index: 1;
}

.num{
  font-size: 300px;
  line-height: 100%;
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255 , 255 , 255 , 0.16);
  top:300px;
  right: 0;
  z-index: 0;
}

.service .box:nth-child(2n) .num{
  right: initial;
  left: 0;
}


.service .inner{
  padding-bottom: 200px;
}

.fade-in {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 2s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/*company*/
.company .c-dot1 {
    width: 600px;
    top: 19px;
    right: -242px;
    z-index: -2;
}

.company table{
  margin: 0 auto 64px;
}

.company tr:nth-of-type(2n+1) th{
  border-top: solid 1px #D7000F;
  border-bottom: solid 1px #D7000F;
}

.company tr:last-child th{
  border-bottom: solid 1px #D7000F;
}

.company tr:nth-of-type(2n+1) td{
  border-top: solid 1px #D4D4D4;
  border-bottom: solid 1px #D4D4D4;
}

.company tr:last-child td{
  border-bottom: solid 1px #D4D4D4;
}

.company th , .company td{
  padding: 24px;
}

.company .inner{
  padding-bottom: 0;
}
/*instagram*/


.instagram .i-dot1 {
    width:auto;
    height: 118px;
    top: 19px;
    left: -40px;
    z-index: -2;
}

.instagram .i-dot2 {
    width:auto;
    height: 118px;
    bottom:80px;
    right: -40px;
    z-index: -2;
}

.ig_btn{
  width: 217px;
}

/*contact*/
.contact th , .contact td{
  color: #000000;
}

#formWrap {
  width: 800px;
  max-width: 100%;
}

.tel img{
  width: 36px;
}

.required{
  margin-left: 4px;
}

.contact table{
  width: 100%;
}

.contact tr {
   display: flex;
   flex-direction: column;
   width:100%;
}

.contact th {
    text-align: left;
    font-weight: bold;
    width: 100%;
    padding: 4px;
}

.contact td{
  padding: 8px 0px;  
}

.selectbox{
  display: flex;
}

input , select , textarea{
  width: 100%;
  padding:8px;
  border:none;
  border-bottom: solid 1px #9D9D9D;
  background-color: #F5F5F5;
  color: #000000;
}

input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
}

button {
    border: none;
    background: none;
    width: 100%;
}

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

  .inner {
    padding: 32px 0px;
}

.sec-title {
    padding: 16px;
}


  .s{
  font-size: 18px;
}

.m{
  font-size: 20px;
}

.l{
  font-size: 24px;
}

.xl{
  font-size: 28px;
}

.xxl{
  font-size: 56px;
}

h2{
  font-size: 16px;
  line-height: 120%;
}

main{
  overflow: hidden;
}

header .box ul{
  padding: 0;
  border:none;
}

.title .en{
  font-size: 64px;
}

.gap-2 {
        gap: 4px;
    }

    .flexbox{
      display: flex;
      flex-direction: column;
      gap:32px;
    }

    header{
      height: 64px;
    }

    header .logo{
      height: 80%;
      width: auto;
    }

    header .logo img{
      height: 100%;
      width: auto;
    }

    .Toggle{
      top: 7px;
    }

    .title .child {
    bottom: -10px;
    right: -30px;
    transform: rotate(7deg);
    height: 100px;
    width: auto;
    background-color: transparent;
}



    /*fv*/
    .catch_copy, .catch_copy span{
      font-size: 48px;
      top: 40px;
      left: 16px;
      line-height: 120%;
    }

    .mv.pd-10{
      padding:0;
    }

    .scroll_bg{
      width: 100px;
      height: 100px;
    }

    .mv .scroll{
      width: 100px;
      height: 100px;
      bottom:20px;
      right: 20px;
    }

    .video .child{
      width: 90%;
      margin: 0 auto;
    }

    .video_content{
      padding: 40px;
    }

    .video_content p{
      font-size: 12px;
    }

    .video_content img{
      width: 200px;
    }

    .video_content .logo img{
      width: 120px;
      margin: 0 auto ;
    }

/*service*/
.service .s-dot2{
  width: 220px;
  top:100px;
  right:0;
  z-index: -1;
}

.absolute_bg {
    top: 130px;
    right: 0;
    width: 72%;
}

.num{
  font-size: 200px;
}

.sign{
  width: 160px;
}

.column.gap-100 {
    gap: 64px;
}

.red1{
  bottom: -40px;
}

.column .box:nth-child(2n) .red1{
  left: inherit;
  right: -40px;
}

/*bio*/
.bio{
  height: 48px;
  width: auto;
}



/*company*/
.company .c-dot1 {
    width: 220px;
    top: 20px;
    right: 0;
    z-index: -2;
}

.company{
  padding-top: 100px;
}
  .company th{
    width: 24%;
    white-space: nowrap;
  }

  .company td{
    width: 80%;
  }

  .company th, .company td{
    padding: 8px;
  }

  /*instagram*/
.ig_btn{
  width: 180px;
}

.instagram{
  padding:40px 0 80px 0;
}

.instagram .i-dot1 {
    width:auto;
    height: 50px;
    top: 0px;
    left: -40px;
    z-index: 2;
}

.instagram .i-dot2 {
    width:auto;
    height: 50px;
    bottom:20px;
    right: -40px;
    z-index: -2;
}

/*contact*/

.contact td , .contact th {
    width: 100%;
    display: block;
  }

  .contact .bg_white{
    padding: 16px;
  }

  footer .logo{
  width: 120px;
  align-self: center;
  padding-bottom: 16px;
}

  footer .flexboxsp{
    padding-left: 0;
  }

  footer .flexboxsp li{
    width:calc((100% - 80px) / 2 );
  }
}

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

  .rl{
  writing-mode: vertical-rl;
  font-size: 110px;
  color: rgba(255 , 255 , 255 , 0.47);
  top: 50%;
  transform: translateY(-50%);
  left: 40px;
  white-space: nowrap;
}

.mission{
  width: 600px;
}

/*service*/
.gap-100{
  gap:160px;
}
.service_img{
  width: calc(50% - 40px);
}

.service .text{
  width: 50%;
}

.service .box:nth-child(2n) .num{
  right: initial;
  left: 0;
}

.service .box:nth-child(2n){
  flex-direction: row-reverse;
}

/*bio*/
.bio{
  height: 60px;
  width: auto;
}

.takayama{
 width:  6000px;
 max-width: 100%; 
}

.sign{
  width: 300px;
}

.biography .sticky{
  padding: 120px 0;
}


/*.instagram iframe{
    width: 782px!important;
    margin: 0 auto 40px;
    display: block;
}*/
  /*company*/
  .company th{
    width: 200px;
  }

  .company td{
    width: 800px;
  }


footer img{
  width: 280px;
}


}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999999999999999;
  background: #000000;
  text-align:center;
  color:#000000;
  top: 0;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:500px;
  max-width:90%;
}

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}