@charset "UTF-8";
/** ───────────────────────────────────────────────────────── **/
/*** ▼ 編集不要 ▼ ***/
h1 {
  display: none;
}

header {
  top: -70px;
}
header.on {
  top: 0;
}

footer {
  display: none;
}

.top_mv {
  width: 100%;
  height: 400vh;
  position: relative;
  z-index: 3;
}
@media (max-width: 740px) {
  .top_mv {
    height: 3000px;
  }
}
.top_mv .top_st_wrap {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  opacity: 1;
}
.top_mv .top_st_wrap video {
  display: block;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}
.top_mv .top_st_wrap .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)), url("../img/top/mv_mask.svg");
  -webkit-mask-image: linear-gradient(#fff, #fff), url("../img/top/mv_mask.svg");
          mask-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)), url("../img/top/mv_mask.svg");
          mask-image: linear-gradient(#fff, #fff), url("../img/top/mv_mask.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%, 30% auto;
          mask-size: 100% 100%, 30% auto;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (max-width: 740px) {
  .top_mv .top_st_wrap .mask {
    -webkit-mask-size: 100% 100%, 50% auto;
            mask-size: 100% 100%, 50% auto;
  }
}
.top_mv .top_st_wrap .main_titl {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  mix-blend-mode: difference;
  text-align: center;
}
.top_mv .top_st_wrap .main_titl .titl01 {
  font-size: clamp(5.5rem, -1.739rem + 9.783vw, 10rem);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
@media (max-width: 740px) {
  .top_mv .top_st_wrap .main_titl .titl01 {
    margin-bottom: 15px;
  }
}
.top_mv .top_st_wrap .main_titl .titl02 {
  font-size: clamp(1.5rem, 0.696rem + 1.087vw, 2rem);
  letter-spacing: 0.4em;
  margin-bottom: 30px;
}
@media (max-width: 740px) {
  .top_mv .top_st_wrap .main_titl .titl02 {
    margin-bottom: 20px;
  }
}
.top_mv .top_st_wrap .main_titl .titl03 {
  font-size: 1.8rem;
  letter-spacing: 0.5em;
}
@media (max-width: 740px) {
  .top_mv .top_st_wrap .main_titl .titl03 {
    font-size: 1.2rem;
  }
}

.con_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  opacity: 0.3;
  background-image: radial-gradient(at 59% 65%, rgb(131, 109, 109) 0px, transparent 50%), radial-gradient(at 35% 12%, hsl(28, 0%, 100%) 0px, transparent 50%), radial-gradient(at 0% 50%, rgb(117, 106, 106) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 0.62) 0px, transparent 50%);
}

#con {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
}

.cs_wrap {
  position: relative;
  z-index: 3;
  width: 100%;
}

.c_base {
  width: 100%;
  padding: 250px 0;
}
@media (max-width: 740px) {
  .c_base {
    padding: 150px 0;
  }
}
.c_base .txts {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  text-align: center;
}
.c_base .txts .titl {
  width: 740px;
  padding: 30px 60px;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  letter-spacing: 0.1em;
  font-size: clamp(2rem, -0.413rem + 3.261vw, 3.5rem);
  color: #ccc;
  margin: 0 auto 50px;
  font-weight: 500;
}
@media (max-width: 740px) {
  .c_base .txts .titl {
    width: 100%;
    padding: 30px;
    margin-bottom: 30px;
  }
}
.c_base .txts .txt {
  line-height: 3;
}
@media (max-width: 740px) {
  .c_base .txts .txt {
    line-height: 2.5;
  }
}

.top_footer {
  width: 100%;
  height: 150vh;
  position: relative;
  z-index: 3;
}
@media (max-width: 740px) {
  .top_footer {
    height: 700px;
  }
}
.top_footer .sora {
  position: absolute;
  bottom: 0;
  left: 0;
}
.top_footer .f_logo {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 150px;
  margin: 0 auto;
}
@media (max-width: 740px) {
  .top_footer .f_logo {
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    width: 100px;
  }
}
.top_footer .cap {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
}/*# sourceMappingURL=top.css.map */