html,body{
    overflow-x: hidden; /* 狭いデバイスでのスクロールを防止 */
}

.bg-black{
    background-color: rgb(5,5,5);
}

.text-white{
    color: rgb(250,250,250);
}

.text-lightgray{
  color: rgb(123, 123, 123);
}

.text-darkgray{
  color: rgb(33, 33, 33);
}

.text-gray{
  color: rgb(53, 53, 53);
}

.blue-color{
  background-color: #0071e3!important;
}

.noto-font{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
  }
  .noto-font-bold{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
  }
  .noto-font-black{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
  }


  
.hero-bg{
    height: calc(100vw/1.9);
    width: 100%;
    overflow: hidden;
    position: relative;
    top: calc(100vw - calc(100vw/0.97));
}

.hero-video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.hero-video video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
.hero-video picture{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -46%);
	width: 100%;
	height: 100%;
}

.hero-video > .video-txt{
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%,-21%);
  width: 100%;
  height: 100%;
  z-index: 555;
}

.hero-video > .img-txt-h1{
  position: absolute;
  top:90%;
  left:50%;
  transform: translate(-50%,-65%);
  width: 100%;
  height: 100%;
  z-index:555;
  max-width: 1920px;
}

.border-radius10{
  border-radius: 10px;
}

.zo-font-bold{
  font-family: "zen-old-mincho", sans-serif;
font-weight: 700;
font-style: normal;
}

.zo-font-black{
  font-family: "zen-old-mincho", sans-serif;
font-weight: 900;
font-style: normal;
}


.refl-txt{
  color: #062738;
  line-height: 1.2;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0,0,0,.6));
  margin-bottom: calc(1em + 20px);
}

.cardimg-posfix{
  padding-top: 165%;
}


/* スマホ表示FIXED */
@media (max-width: 959px) {
    .hero-bg{
        height: calc(100vw/0.7);
        top: calc(100vw - calc(100vw/0.88));
    }

    .cardimg-posfix{
      padding-top: 80%;
    }

    .offcanvas-body {
      background-color: rgba(255,255,255,0.8);
    }

    /* .navbar{*/
      /*height: 4.4vh;*/
    /* }*/
    .hero-video > .video-txt{
      top:87%;
    }
    .hero-video picture{
      position: absolute;
      top: 50%;
      left: 50%;
      object-fit: cover;
      transform: translate(-50%, -40%);
      width: 100%;
      height: 100%;
    }
    .marginfix-sm{
      margin-top:-30px;
    }
    .custom-shape-divider-bottom-fix-sm {
      position: absolute;
      bottom: 10px!important;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
  }
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 10px!important;
}
}


/* 以下コピペCSS */

.fadeIn {
    animation-name: fadeInAnime;
    animation-fill-mode:backwards;
    animation-duration:3s;
    animation-iteration-count:1;
    animation-timing-function:ease;
    animation-delay: 0.5s;
    animation-direction:normal;
    }
    
    @keyframes fadeInAnime{
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .fadeUp {
        animation-name: fadeUpAnime;
        animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
        animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
        opacity:0;
        }
        
        /*アニメーションの開始から終了までを指定する*/
        @keyframes fadeUpAnime{
          from {
            opacity: 0;
          transform: translateY(100px);
          }
        
          to {
            opacity: 1;
          transform: translateY(0);
          }
        }
        
        /*==================================================
        アニメーション設定
        ===================================*/
        
        .change-time05{
          animation-duration: 0.5s;
        }
        .change-time1{
          animation-duration: 1s;
        }
        .change-time15{
          animation-duration: 1.5s;
        }
        .change-time2{
         animation-duration: 2s;
        }
        .change-time25{
        animation-duration: 2.5s;
        }
        
        /* 動きをループさせるCSS*/
        
        .count2{
        animation-iteration-count: 2;/*この数字を必要回数分に変更*/
        }
        
        .countinfinite{
         animation-iteration-count: infinite;/*無限ループ*/
        }
        
        /* アニメーションの開始を遅らせるCSS*/
        
        .delay-time05{
        animation-delay: 0.5s;
        }
        .delay-time1{
        animation-delay: 1s;
        }
        .delay-time15{
        animation-delay: 1.5s;
        }
        .delay-time2{
        animation-delay: 2s;
        }
        .delay-time25{
          animation-delay: 2.5s;
        }
        
        
        /* アニメーションの進行具合を操作するCSS*/
        
        .timing-ease{
        animation-timing-function:ease;
        }
        
        .timing-ease-in{
        animation-timing-function:ease-in;
        }
        
        .timing-ease-out{
        animation-timing-function:ease-out;
        }
        
        .timing-ease-in-out{
        animation-timing-function:ease-in-out;  
        }
        
        .timing-linear{
        animation-timing-function:linear; 
        }
        
        .timing-steps{
        animation-timing-function:steps(4, end);  
        }
        
        .timing-cubic-bezier{
        animation-timing-function:cubic-bezier(.17,.67,.67,.51);  
        }
        
        /*==================================================
        アニメーションをまとめて設定する
        ===================================*/
        
        .fadeDown{
        animation: fadeDownAnime 1s ease 1.5s forwards;/*アニメーションの定義名、アニメーション１回分の時間の長さ、アニメーションの進行具合、アニメーションの開始を遅らせる、アニメーションの開始と終了時の状態を指定をまとめて設定*/
        opacity:0;
        }
        
        /*アニメーションの開始から終了までを指定する*/
        @keyframes fadeDownAnime{
          from {
            opacity: 0;
          transform: translateY(-100px);
          }
        
          to {
            opacity: 1;
          transform: translateY(0);
          }
        }



/* カルーセル */
#myCarouselOne {
  margin-bottom: 10em;
}
#myCarouselTwo {
    margin-bottom: 9em;
  }

/*カルーセルレスポンシブ smartphone*/
.ci-responsive{
  position: absolute;
  right: 0!important;
  left: 0!important;
  top: 100%!important;
  z-index: 2!important;
  display: flex!important;
  justify-content: center!important;
  padding: 0!important;
  margin-right: 3%!important;
  margin-bottom: 1rem!important;
  margin-left: 3%!important;
  margin-top: 1rem!important;
   & button{
    box-sizing: content-box!important;
    flex: 0 1 auto!important;
   /* width: 90px;
    height: 90px; */
    padding: 0!important;
    margin-right: 3px!important;
    margin-left: 3px!important;
    text-indent: unset!important;
    cursor: pointer!important;
    background-clip: padding-box!important;
    border: 0!important;
    opacity: .5!important;
    transition: opacity .6s ease;
    position: relative!important;
  }
  .active {
    opacity: 1!important;
  }
}
.ci-responsive{
  [data-bs-target] {
    max-width: 100%;
    width: 60px!important;
    height: 50px!important;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

.ci-responsive-minimum{
  [data-bs-target] {
    max-width: 100%;
    width: calc(9vw)!important;
    height: calc(8vw)!important;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

.ci-responsive-minimum{
  position: absolute;
  right: 0!important;
  left: 0!important;
  top: 91%!important;
  z-index: 2!important;
  display: flex!important;
  justify-content: center!important;
  padding: 0!important;
  margin-right: 3%!important;
  margin-bottom: 1rem!important;
  margin-left: 3%!important;
  margin-top: 1rem!important;
   & button{
    box-sizing: content-box!important;
    flex: 0 1 auto!important;
   /* width: 90px;
    height: 90px; */
    padding: 0!important;
    margin-right: 3px!important;
    margin-left: 3px!important;
    margin-bottom:1rem!important;
    text-indent: unset!important;
    cursor: pointer!important;
    background-clip: padding-box!important;
    border: 0!important;
    opacity: .5!important;
    transition: opacity .6s ease;
    position: relative!important;
  }
  .active {
    opacity: 1!important;
  }
  [data-bs-target] {
    max-width: 100%;
    width: calc(15vw)!important;
    height: calc(10vw)!important;
    -o-object-fit: cover;
    object-fit: cover;
  }
}



.carousel-inner {
  .carousel-item.active {
    display: flex;
  }
  .carousel-item-next {
    display: flex;
  }
  .carousel-item-prev {
    display: flex;
  }
  .carousel-item-end {
    transform: translateX(0);
  }
  .carousel-item-start {
    transform: translateX(0);
  }
}
@media (max-width: 767px) {/*スマホ表示のみ*/
  .carousel-inner {
    .carousel-item {
      >div {
        display: none;
        &:first-child {
          display: block;
        }
      }
    }
  }
  #myCarouselOne{
    margin-bottom: 5em;
  }
  #myCarouselTwo{
    margin-bottom: 6em;
  }

}

@media (min-width: 768px) {/*PC表示*/
  .carousel-control-prev{
    left:-10%;
  }
  .carousel-control-next{
    right:-10%;
  }
  .carousel-inner {

  }  
  .carousel-indicators {
    & img {
      max-width: 100%!important;
      width: 120px!important;
      height: 120px!important;
      -o-object-fit: cover!important;
      object-fit: cover!important;
    }
    [data-bs-target] {
      width: 120px!important;
      height: 120px!important;
    }
    .active {
      opacity: 1!important;
    }
  }
  .ci-responsive{
    top: 100%!important;
    margin-right: 10%!important;
    margin-bottom: 1rem!important;
    margin-left: 10%!important;
    margin-top: 1rem!important;
  }
  .ci-responsive-minimum{
    top: 100%!important;
    margin-right: 5%!important;
    margin-bottom: 1rem!important;
    margin-left: 5%!important;
    margin-top: 1rem!important;
  }
}/*PC Visible*/



.icon-link > .bi {
    width: .75em;
    height: .75em;
  }
  
  /*
   * Custom translucent site header
   */
  
  .site-header {
    background-color: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .site-header a {
    color: #8e8e8e;
    transition: color .15s ease-in-out;
  }
  .site-header a:hover {
    color: #fff;
    text-decoration: none;
  }

/*
* Copy CSS is here
*
*/

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }
  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .bd-mode-toggle {
    z-index: 1500;
  }





  /*****************************
	フォントサイズ（共通）
******************************/

.font-size-07 {
	font-size: .7rem;
}

.font-size-08 {
	font-size: .8rem;
}

.font-size-09 {
	font-size: .9rem;
}

.font-size-10 {
	font-size: 1rem;
}

.font-size-11 {
	font-size: 1.1rem;
}

.font-size-12 {
	font-size: 1.2rem;
}

.font-size-13 {
	font-size: 1.3rem;
}

.font-size-14 {
	font-size: 1.4rem;
}

.font-size-15 {
	font-size: 1.5rem;
}

.font-size-16 {
	font-size: 1.6rem;
}

.font-size-17 {
	font-size: 1.7rem;
}

.font-size-18 {
	font-size: 1.8rem;
}

.font-size-19 {
	font-size: 1.9rem;
}

.font-size-20 {
	font-size: 2rem;
}

/*****************************
	フォントサイズ（相対）
******************************/

.font-size-rel-08 {
	font-size: .8em;
}

.font-size-rel-09 {
	font-size: .9em;
}

/*********************
	>768px(-md)
**********************/

@media(min-width: 768px){

/*****************************
	フォントサイズ（PC）
******************************/

.font-size-md-09 {
  font-size: .9rem;
}

	.font-size-md-10 {
		font-size: 1rem;
	}

	.font-size-md-11 {
		font-size: 1.1rem;
	}

	.font-size-md-12 {
		font-size: 1.2rem;
	}

	.font-size-md-13 {
		font-size: 1.3rem;
	}

	.font-size-md-14 {
		font-size: 1.4rem;
	}

	.font-size-md-15 {
		font-size: 1.5rem;
	}

	.font-size-md-16 {
		font-size: 1.6rem;
	}

	.font-size-md-17 {
		font-size: 1.7rem;
	}

	.font-size-md-18 {
		font-size: 1.8rem;
	}

	.font-size-md-19 {
		font-size: 1.9rem;
	}

	.font-size-md-20 {
		font-size: 2rem;
	}

	.font-size-md-21 {
		font-size: 2.1rem;
	}

	.font-size-md-22 {
		font-size: 2.2rem;
	}

	.font-size-md-23 {
		font-size: 2.3rem;
	}
	.font-size-md-24 {
		font-size: 2.4rem;
	}

	.font-size-md-25 {
		font-size: 2.5rem;
	}

    .font-size-md-26 {
		font-size: 2.6rem;
	}
	.font-size-md-30 {
		font-size: 3rem;
	}
}