@charset "UTF-8";
/* CSS Document */
/* フェードインのみ */
.fade {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.fade.active {
  opacity: 1;
}
.fade02 {
  opacity: 0;
  transition: opacity 1.5s ease;
	transition-delay: 0.8s;
}
.fade02.active {
  opacity: 1;
}
.fade03 {
  opacity: 0;
  transition: opacity 1.5s ease;
	transition-delay: 1.6s;
}
.fade03.active {
  opacity: 1;
}
.fadeFast {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fadeFast.active {
  opacity: 1;
}
/* 上からスライドイン */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease;
}
.slide-up.active {
  opacity: 1;
  transform: translateY(0);
}
.slide-upAuto {
  opacity: 0;
  transform: translateY(30px);
	animation: slideup_anime 0.5s forwards;
}
@keyframes slideup_anime {
  0% {
    
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 下からスライドイン */
.slide-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.5s ease;
}
.slide-down.active {
  opacity: 1;
  transform: translateY(0);
}
/* 左からスライドイン */
.slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.5s ease;
}
.slide-left.active {
  opacity: 1;
  transform: translateX(0);
}
.slide-leftAuto {
  opacity: 0;
  transform: translateX(-30px);
	animation: slide_anime 0.5s forwards;
}
@keyframes slide_anime {
  0% {
    
  }
   100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 時間 */
.time02{
	transition-delay: 0.2s;
}
.time02.active::before{
	transition-delay: 0.2s;
}
.time04{
	transition-delay: 0.4s;
}
.time04.active::before{
	transition-delay: 0.4s;
}
.time06{
	transition-delay: 0.6s;
}
.time06.active::before{
	transition-delay: 0.6s;
}
.time08{
	transition-delay: 0.8s;
}
.time08.active::before{
	transition-delay: 0.8s;
}
.time10{
	transition-delay: 1.0s;
}
.time10.active::before{
	transition-delay: 1.0s;
}
.time12{
	transition-delay: 1.2s;
}
.time14{
	transition-delay: 1.4s;
}
.time16{
	transition-delay: 1.6s;
}
.time18{
	transition-delay: 1.8s;
}
.time20{
	transition-delay: 2.0s;
}
.fade-anime{
	opacity: 0;
	animation: step_anime 1.5s forwards;
	
}
.fade-anime01{
	opacity: 0;
	animation: step_anime 1.5s forwards;
	animation-delay: 0.4s;
}
.fade-anime02{
	opacity: 0;
	animation: step_anime 1.5s forwards;
	animation-delay: 1.2s;
}
.fade-anime03{
	opacity: 0;
	animation: step_anime 1.5s forwards;
	animation-delay: 2.0s;
}
.timeAnime02{
	animation-delay: 0.2s;
}
.timeAnime04{
	animation-delay: 0.4s;
}
.timeAnime06{
	animation-delay: 0.6s;
}
.timeAnime08{
	animation-delay: 0.8s;
}

.step01{
	opacity: 0;
	transition: opacity 0.2s ease;
}
.step02{
	opacity: 0;
	transition: opacity 0.2s ease;
	transition-delay: 0.4s;
}
.step03{
	opacity: 0;
	transition: opacity 0.2s ease;
	transition-delay: 0.8s;
}
.step04{
	opacity: 0;
	transition: opacity 0.2s ease;
	transition-delay: 1.2s;
}
.step05{
	opacity: 0;
	transition: opacity 0.2s ease;
	transition-delay: 1.6s;
}
@keyframes step_anime {
  0% {
    
  }
   100% {
    opacity: 1;
    
  }
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}



 /* ロゴコンテナ */
  .bg-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 0;
  }

  .logo-wrap {
    position: relative;
    width: 96%;
    height: 96%;
  }

  /* ロゴSVG本体（常に白で描画） */
  .logo-wrap svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
  }

  /* クリップ用のオーバーレイ: 左→右へ広がる白いワイプ */
  .logo-wrap svg.reveal {
    opacity: 1;
    /* clip-path で左から右へ矩形を広げる */
    clip-path: inset(0 100% 0 0);
    animation: wipe-lr 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
  }

  @keyframes wipe-lr {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0%   0 0); }
  }


.topImgMask{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.topImgMask::before{
	content: '';
	width: 100%;
	height: 50%;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	animation: upMask 1.5s forwards;
	animation-delay: 0.2s;
}
.topImgMask::after{
	content: '';
	width: 100%;
	height: 50%;
	background-color: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	animation: upMask 1.5s forwards;
	animation-delay: 0.2s;
}
@keyframes upMask {
  0% {
	  
  }
   100% {
    height: 0;
  }
}
.site-header.headSlideDown{
	top: -88px;
	animation: headerAnime 1s forwards;
}
@keyframes headerAnime {
  0% {
	  top: -88px;
  }
   100% {
    top: 0px;
  }
}


.line-container {
  width: 100%;
  height: 500px; /* 背景としての高さ */
  overflow: hidden;
	z-index: 0;
  position: absolute;
  bottom: -140px;
}
.animated-line {
  width: 100%;
  height: 100%;
  /* 右から左にするために左右反転させる */
  transform: scaleX(-1);
}
.animated-line path {
  fill: none;
  stroke: #1e1c26; /* 画像に近い色 */
  stroke-width: 50; /* ラインの太さ */
  stroke-linecap: round;
  
  /* アニメーションの準備：ラインを隠しておく */
  stroke-dasharray: 1500; 
  stroke-dashoffset: 1500;
  transition: stroke-dashoffset 2s ease-out;
	/* 右から左にするために左右反転させる */
}

/* 画面内に入った時に付与されるクラス */
.animated-line.is-visible path {
  stroke-dashoffset: 0;
}
.anim-fixed-container {
        margin: 0 auto 0px;
        position: relative;
        background-color: transparent;
        
 }
#animation_container{
	position: absolute;
	 bottom: -100px;
	z-index: 0;
}
#animation_container_02{
	position: absolute;
	 bottom: -100px;
	z-index: 0;
	left: 0;
}
#animation_container_04{
	position: absolute;
	 bottom: -200px;
	z-index: -1;
	left: 0;
}
#animation_container_05{
	position: absolute;
	 top: 300px;
	left: 0;
	z-index: 0;
}
/* 1600px以上の場合のみ100%にする */
    @media (min-width: 1600px) {
        .anim-fixed-container {
            width: 100% !important;
            max-width: 100% !important;
        }
    }


.lineMaskRight{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.lineMaskRight::before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	animation: rightMask 1.5s forwards;
	animation-delay: 0.2s;
}
@keyframes rightMask {
  0% {
	  
  }
   100% {
    width: 0;
  }
}

.lineMaskAnimeLeft{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.lineMaskAnimeLeft::before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	transition: all 1.5s ease;
}
.lineMaskAnimeLeft.active::before {
  width: 0;
}
.lineMaskAnimeRight{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.lineMaskAnimeRight::before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all 1.5s ease;
}
.lineMaskAnimeRight.active::before {
  width: 0;
}
.lineMaskAnimeUp{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.lineMaskAnimeUp::before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	transition: all 3s ease;
}
.lineMaskAnimeUp.active::before {
  height: 0;
}
.lineMaskAnimeLeftWht{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.lineMaskAnimeLeftWht::before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	transition: all 1.5s ease;
}
.lineMaskAnimeLeftWht.active::before {
  width: 0;
}
.lineMaskAnimeRightWht{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.lineMaskAnimeRightWht::before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: #FFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all 1.5s ease;
}
.lineMaskAnimeRightWht.active::before {
  width: 0;
}