@charset "utf-8";
/* CSS Document */
.header_n.scrolled {
  background: rgba(4, 5, 10, 0.4);
  backdrop-filter: blur(6px);
}
.header_n .head_nav .head_menu .ul .li a p, .header_n .morebox p {
  color: #fff;
}
/* ナビ下線 */
.header_n .head_nav .head_menu .ul .li a::after {
  background: #fff;
}
/* ハンバーガー線 */
.header_n .menu-bt .line div {
  background: #fff;
}
/* MENU文字 */
.header_n .menu-bt p {
  color: #fff;
}
.header_n .morebox .more a {
  border: 1px solid #fff;
}
.header_n .morebox .more:last-child a {
  background: transparent;
  border-color: #fff;
}
.header_n .morebox .more:last-child p {
  color: #fff;
}
.header_n .logo1{
    display: block;
}
.header_n .logo2{
    display: none;
}
.section01 .imgbox {
  justify-content: center; /* flexのとき中央寄せ */
  padding: 40px; /* 外側の白余白 */
  background: #f3f3f3; /* スクショの薄グレー */
}
.section02 .rightbox {
  flex-wrap: nowrap;
  gap: 20px;
  align-items: flex-start;
}
/* 縦書きタイトル */
.section02 .titlebox2 .entitle1 {
  writing-mode: vertical-rl !important;
  text-orientation: mixed;
  letter-spacing: .2em;
  margin: 0;
}
/* 画像側 */
.section02 .rightbox .imgbox {
  flex: 1;
}
.section02 .rightbox .imgbox img {
  display: block;
  width: 100%;
  height: auto;
}

.section06 .contents .webgene-blog {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: row;
  gap: 0px;
}
.section06 .contents .webgene-blog .webgene-item {
  width: calc(100% / 4);
}
.section06 .contents .webgene-blog .webgene-item a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.section06 .contents .webgene-blog .webgene-item a > div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: ease 1.0s;
}
.section06 .contents .webgene-blog .webgene-item a:hover > div {
  transform: translate(-50%, -50%) scale(1.1);
}
@media screen and (max-width: 576px) {
  .section06 .contents .webgene-blog .webgene-item {
    width: calc(100% / 2);
  }
}

.fv {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
body.gjs-dashed .fv {
  height: auto;
}
body.gjs-dashed .fv::before, body.gjs-dashed .fv::after {
  display: none;
}
/* =========================================
   Swiper
   ========================================= */
.fv .swiper {
  z-index: 1;
  position: relative;
}
@keyframes zoomUp {
  0% {
    -ms-filter: blur(6px);
    filter: blur(6px);
    transform: scale(1);
  }
  30% {
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    transform: scale(1.15);
  }
}
body:not(.gjs-dashed) .fv .swiper-slide {
  width: 100% !important;
  height: 100vh;
}
body:not(.gjs-dashed) .fv .swiper-slide .swiper-img {
  width: 100% !important;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.fv .swiper-slide-active .swiper-img, .fv .swiper-slide-duplicate-active .swiper-img, .fv .swiper-slide-prev .swiper-img {
  animation: zoomUp 10s linear 0s normal both;
}
body:not(.gjs-dashed) .fv .swiper-slide img {
  display: block !important;
  opacity: 0;
  height: auto;
  width: 100%;
}
/* =========================================
   Text
   ========================================= */
.fv .txtbox {
  position: absolute;
  left: 6%;
  bottom: 20%;
  z-index: 3;
  color: #fff;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 24px;
  width: min(900px, 92vw);
}
/* 編集モード（gjs）用 */
body.gjs-dashed .fv .txtbox {
  position: static;
  transform: none;
}
@keyframes fvlogo {
  0% {
    opacity: 0;
    transform: scale(0.4);
    filter: blur(18px) brightness(2.2);
  }
  55% {
    opacity: 1;
    transform: scale(1.12);
    filter: blur(2px) brightness(1.4);
  }
  75% {
    transform: scale(0.96);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}
.fv .txtbox h1, .fv .txtbox p, .fv .txtbox .more {
  opacity: 0;
}
body.gjs-dashed .fv .txtbox h1, body.gjs-dashed .fv .txtbox p {
  opacity: 1;
}
/* h1 */
.fv .txtbox h1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: clamp(30px, 3.2vw, 42px);
  letter-spacing: 0.14em;
  font-weight: 500;
  animation-name: fvtxt1;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
  color: #fff;
}
.fv .txtbox .catch {
  font-weight: 300;
  animation-name: fvtxt2;
  animation-duration: 1.8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 1.2s;
  color: #fff;
}
.fv .txtbox p {
  animation-name: fvtxt2;
  animation-duration: 1.8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.fv .txtbox .more {
  animation-name: fvtxt2;
  animation-duration: 1.8s;
  animation-delay: 1.6s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
/* =========================================
   Text Animations
   ========================================= */
@keyframes fvtxt1 {
  0% {
    opacity: 0;
    -ms-filter: blur(6px);
    filter: blur(6px);
    letter-spacing: -0.2rem;
  }
  100% {
    opacity: 1;
    -ms-filter: blur(0px);
    filter: blur(0px);
    letter-spacing: 0.1rem;
  }
}
@keyframes fvtxt2 {
  0% {
    opacity: 0;
    -ms-filter: blur(6px);
    filter: blur(6px);
    letter-spacing: -0.1rem;
  }
  100% {
    opacity: 1;
    -ms-filter: blur(0px);
    filter: blur(0px);
    letter-spacing: 0.1rem;
  }
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px) {}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px) {}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px) {}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px) {}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px) {}