html,body{
    overflow-x: hidden;/* For Small Devices denied scroll*/
}


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,900&display=swap');

.bg-black{
    background-color: rgb(15,9,12);
}

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

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

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

.text-black{
  color: rgb(12,11,9);
}
.text-gray{
  color: rgb(53, 53, 53);
}

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

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.noto-sans-jp-thin {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.noto-sans-jp-light {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.noto-sans-jp-normal {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.noto-sans-jp-bold {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.noto-sans-jp-heavy {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

  
.hero-bg{
  margin-top: 62px;
  width:auto;
  height: 100vh;
  max-height: 57vw;
  position: relative;
}

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

.hero-image > .float-txt-bottom{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,20%);
  width: 100%;
  height: 100%;
  z-index: 555;
}
.hero-image > .float-img-bottom{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,30%);
  width: 100%;
  max-width: 500px;
  height: 100%;
  z-index: 555;
}

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


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


.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%;
}

.lsp-1{
  letter-spacing: 1px;
}
.lsp-2{
  letter-spacing: 2px;
}
.lsp-3{
  letter-spacing: 3px;
}
.lsp-4{
  letter-spacing: 4px;
}
.lsp-5{
  letter-spacing: 5px;
}
.lsp-title{
  letter-spacing: 0.12em;
}

/* スマホ表示FIXED */
@media (max-width: 959px) {
  .hero-image{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
  .hero-image picture{
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
  }
    .hero-bg{
      margin-top: 62px;
      width:auto;
      height: 100vh;
      max-height: 57vw;
      position: relative;
    }


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

}


/* 以下コピペ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);
          }
        }


@media (max-width: 767px) {/*スマホ表示のみ*/


}

@media (min-width: 768px) {/*PC表示*/

}/*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
*
*/

  .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;
  }


  /*****************************
  Variable Font Size
******************************/

.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-25 {
	font-size: 2.5rem;
}

.font-size-30 {
	font-size: 3rem;
}

.font-size-40 {
	font-size: 4rem;
}

.font-size-50 {
	font-size: 5rem;
}

.font-size-h1{
  font-size: 3rem;
}

/*****************************
	Variable Font Size Relative
******************************/

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

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

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

@media(min-width: 768px){

/*****************************
 PC Font Size
******************************/

.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;
	}
  .font-size-h1{
    font-size:calc(11vw + 2rem);
  }
  .font-size-h2{
    font-size:calc(1.8vw);
  }
}