/* TOP */

 /* --- ここからトップページ用アニメーション --- */

/* ③ ヘッダーの初期状態 */
.header {
  transform: translateY(-100px);
  transition: transform 0.8s ease-out;
}
/* ヘッダーのアニメーション後の状態 */
.header.is-visible {
  transform: translateY(0);
}

/* ① 画像（ヒーローセクション）の初期状態 */
.topHero {
  opacity: 0;
  transition: opacity 1.5s ease-in;
}
/* 画像のアニメーション後の状態 */
.topHero.is-visible {
  opacity: 1;
}

/* テキストの初期状態とアニメーション設定 */
.topHero_inner-Box-Ttl span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 少し下に配置 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの変化を指定 */
}

/* アニメーション後の状態 */
.topHero_inner-Box-Ttl.is-visible span {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}

/* --- ここまでトップページ用アニメーション --- */

@media (width >= 769px) {
  
  .header{
    position: fixed;
    height: 80px;
    .header_inner{
      .header_inner-Logo{
        a{
          width: 186px;
          top: 46px;
          left: 112px;
        }
      }
      nav.nav {
      }
      ul.header_inner-Menu {
        .nav01{
          picture{
          }
        }
        .nav02{
          picture{
          }
        }
        .nav03{
          picture{
          }
        }
        .nav04{
          picture{
          }
        }
        .nav05{
          picture{
          }
        }
        .nav06{
          picture{
          }
        }
        .nav07{
          picture{
          }
        }
      }
      li a{
      }
      .hamburger {
        opacity: 0;
      }
      .hamburger span {
      }
      .hamburger span:nth-of-type(1) {
      }
      .hamburger span:nth-of-type(2) {
      }
      .hamburger span:nth-of-type(3) {
      }
      #header-menu.open{
      }    
      .hamburger.open span:nth-of-type(1) {
      }
      .hamburger.open span:nth-of-type(2) {
      }
      .hamburger.open span:nth-of-type(3) {
      }
    }
    .pc-nav{
      display: none;
      position: absolute;
      top: 102px;
      right: 133px;
      li{
        a{
          text-align: left;
          margin: 0px 0 26px;
          padding: 0;
        }
      }
    }
    &.fixed{
      position: fixed;
      background: transparent;
      top: 0px;
      height: 0;
      .header_inner{
        .header_inner-Logo{
        }
        #hamburger{
          opacity: 1;
          top: 47px;
          right: 52px
        }
        .sp-none{
          display: none ! important;
        }
      }
    }
  } 
}

@media (width >= 992px) {
  .header{
    .header_inner{
      .pc-nav{
        display: flex;
        position: absolute;
        top: 36px;
        right: 133px;
        width: 476px;
        justify-content: space-between;
      }
    }
  }
}

/*************************
* topHero
*************************/

.topHero {
  .topHero_inner{
    max-height: 100dvh;
    overflow: hidden;
    .topHero_inner-Box{
      position: relative;
      .img{
        img{
          max-height: 100dvh;
          overflow: hidden;
          object-fit: cover;
          object-position: center;
          width: 100%;
        }
      }
      .topHero_inner-Box-Ttl{
        position: absolute;
        bottom: 85px;
        left: 32px;
        color: #ffffff;
        font-size: 35px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 50px;
        span{
          font-size: 35px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 50px;
        }
      }
    }
  }
}
@media (width >= 769px) {
  .topHero {
    .topHero_inner{
      .topHero_inner-Box{
        .img{
          img{
            display: block;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            object-position: center;
          }
        }
        .topHero_inner-Box-Ttl{
          position: absolute;
          top: 58%;
          left: 115px;
          transform: translate(0%, -50%);
          font-size: 65px;
            line-height: 1.4;
            font-weight: 500;
            letter-spacing: .05em;
          span{
            font-size: 65px;
            line-height: 1.4;
            font-weight: 500;
            letter-spacing: .05em;
          }
        }
      }
    }
  }
}

/*************************
* topPhilosophy
*************************/
.topPhilosophy{
  .topPhilosophy_inner{
    .topPhilosophy_inner-Ttl{
      width: 234px;
      margin: 0 auto 46px;
    }
    .img{}
    .topPhilosophy_inner-Catch{
      font-size: 21px;
      text-align: center;
      margin: 0 auto 38px;
    }
    .topPhilosophy_inner-Txt{
      font-weight: 400;
      color: #222222;
      font-size: 14.5px;
      letter-spacing: 0;
      line-height: 30px;
    }
    .topPhilosophy_inner-Box{
      margin: 104px auto 0;
      dl{
        dt{
          font-size: 21px;
          font-weight: 500;
          letter-spacing: 0;
          line-height: 30px;
          margin: 0 auto 28px;
          .en{
            font-size: 12px;
            display: block;
            font-weight: 300;
          }
        }
        dd{
          font-size: 16px;
          letter-spacing: 0;
          line-height: 30px;
        }
        &:nth-of-type(1){
          margin-bottom: 104px;
        }
        &:nth-of-type(2){
          margin-bottom: 104px;
        }
      }
    }
  }
}
@media (width >= 769px) {
  .topPhilosophy{
    padding-bottom: 0;
    .topPhilosophy_inner{
      .topPhilosophy_inner-Ttl{
        width: 557px;
        margin: 0 auto 143px;
      }
      .img{}
      .topPhilosophy_inner-Catch{
        font-size: 35px;
        font-weight: 300;
        letter-spacing: .1em;
        margin: 0 auto 54px;
      }
      .topPhilosophy_inner-Txt{
        max-width: 824px;
        margin: 0 auto;
        font-size: 18px;
        font-weight: 300;
        letter-spacing: .05em;
        text-align: center;
        line-height: 1.8;
      }
      .topPhilosophy_inner-Box{
        max-width: 1036px;
        margin: 172px auto 0;
        dl{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          dt{
            font-size: 35px;
            width: 372px;
            font-weight: 300;
            line-height: 1.5;
            letter-spacing: .05em;
            .en{
              font-size: 18px;
              font-weight: 300;
              margin: 6px 0 0;
              letter-spacing: 0;
            }
          }
          dd{
            width: 569px;
            font-size: 18px;
            font-weight: 300;
            letter-spacing: .05em;
            line-height: 35px;
          }
          &:nth-of-type(1){
            margin-bottom: 118px;
          }
          &:nth-of-type(2){
            margin-bottom: 149px;
          }
        }
      }
    }
  }
}

/*************************
* topProject
*************************/
.topProject{
  .topProject_inner{
    .topProject_inner-Ttl{
      width: 160px;
      margin: 0 auto 46px;
    }
    .img{}
    .topProject_inner-Box{
      position: relative;
      .topProject_inner-Box-Ttl{
        width: 311px;
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
@media (width >= 769px) {
  .topProject{
    padding: 178px 0 178px;
    .topProject_inner{
      .topProject_inner-Ttl{
        width: 389px;
        margin: 0 auto 219px;
      }
      .img{}
      .topProject_inner-Box{
        position: relative;
        a{
          display: block;
          margin: 0 calc(50% - 49vw);
        }
        .topProject_inner-Box-Ttl{
          max-width: 1046px;
          width: 90%;
        }
      }
    }
  }
}

/*************************
* topContact
*************************/
.topContact{
  .topContact_inner{
    .topContact_inner-Ttl{
      width: 166px;
      margin: 0 auto 70px;
    }
    .topContact_inner-List{
      margin: 0 auto 38px;
      .topContact_inner-List-Item{
        &:nth-of-type(1),&:nth-of-type(2){
          margin-bottom: 29px;
        }
        a{
          font-weight: 500;
          font-size: 20px;
          text-align: center;
          letter-spacing: 0;
          border: 1px solid #000000;
          border-radius: 4px;
          display: block;
          padding: 9px 0;
          font-family: 'Helvetica Neue';
        }
      }
    }
    .topContact_inner-Insta{
      a{
        width:33px;
        margin: 53px auto 82px;
        display: block;
      }
    }
  }
}

@media (width >= 360px) {
  .topContact{
    .topContact_inner{
      .topContact_inner-Ttl{
      }
      .topContact_inner-List{
        .topContact_inner-List-Item{
          a{
            font-size: 25px;
          }
        }
      }
    }
  }
}
@media (width >= 769px) {
  .topContact{
    .topContact_inner{
      .topContact_inner-Ttl{
        width: 407px;
        margin: 0 auto 159px;
      }
      .topContact_inner-List{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1251px;
        .topContact_inner-List-Item{
          width: 32%;
          &:nth-of-type(1){
          }
          a{
            padding: 18px 0;
            font-size: 38px;
          }
        }
      }
      .topContact_inner-Insta{
        a{
          width:66px;
          margin: 53px auto 145px;
          display: block;
        }
      }
    }
  }
}