@charset "UTF-8";

.blur {
	position: relative;
}
.blur:before {
	content: "";
	position: absolute;
	top: -7px;
	left: 0;
	background: inherit;
	background-clip: content-box;
	width: 100%;
	height: 100px;
	-webkit-filter: blur(2px);
	filter: blur(2px);
  z-index: 5 !important;
}

.blur_bottom {
	position: relative;
}
.blur_bottom:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background: inherit;
	background-clip: content-box;
	width: 100%;
	height: 100px;
	-webkit-filter: blur(5px);
	filter: blur(5px);
  /*z-index: 5 !important;*/
}

.video-container {
  /*height: 100vh;*/
  position: relative;
  overflow: hidden;
  /*background-color: #fff000;*/
}

/*
.video{
object-fit: fill;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
*/

.video{
 width: auto;
 height: auto;
 z-index: 0 !important;
}

/*position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
/*background: url('../image/monster_preview.png') no-repeat;
background-size: cover;*/

.videoin_img{
  position:absolute;
  top:40%;
  left:20%;
  width:60%;
  display:flex;
  justify-content:center;
  align-items: center;
  z-index: 1 !important;
  animation: buru 2s infinite;
  animation-delay: 0s;
}

@media(max-width:550px){
  .videoin_img{
    position:absolute;
    top:40%;
    left:5%;
    width:90%;
  }
}

@keyframes buru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    5% {transform: translate(20px, 20px) rotateZ(1deg)}
    10% {transform: translate(0px, 20px) rotateZ(0deg)}
    15% {transform: translate(20px, 0px) rotateZ(-1deg)}
    20% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(0px, 0px) rotateZ(0deg)}
    30% {transform: translate(20px, 20px) rotateZ(1deg)}
    35% {transform: translate(0px, 20px) rotateZ(0deg)}
    40% {transform: translate(20px, 0px) rotateZ(-1deg)}
    45% {transform: translate(0px, 0px) rotateZ(0deg)}
    50% {transform: translate(0px, 0px) rotateZ(0deg)}
    55% {transform: translate(20px, 20px) rotateZ(1deg)}
    60% {transform: translate(0px, 20px) rotateZ(0deg)}
    65% {transform: translate(20px, 0px) rotateZ(-1deg)}
    70% {transform: translate(0px, 0px) rotateZ(0deg)}
    75% {transform: translate(0px, 0px) rotateZ(0deg)}
    80% {transform: translate(20px, 20px) rotateZ(1deg)}
    85% {transform: translate(0px, 20px) rotateZ(0deg)}
    90% {transform: translate(20px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.video_text{
width:90%;
max-width: 900px;
height: auto;
 display:flex;
 justify-content:center;
 align-items: center;
 z-index: 2 !important;
}
@media screen and (max-width: 500px) {
    .video_text{
    width:31%;
    height: auto;
     display:flex;
     justify-content:center;
     align-items: center;
    }
}


/*****************************************************

boat-blaze  CSS

PC ヘッダ　各部共通部分

*****************************************************/

/*head Login 固定*/
#bc-heda_logoin{

}


/*head LINE 固定*/
#bc-head_line{


}

#header{
  position: fixed;
  padding:0 3%;
  width: 100%;  /*width: 100%;*/
  height: 90px;

  z-index: 9 !important;
  display: flex;
  justify-content:center;
  background-color: rgba(255,255,255,0.7);
}

.headerin{
  width: 100%;
  height: 100%;
  max-width: 1200px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media(min-width:1201px){
  #header{

  }
}


/*****************************************************
boat-blaze  CSS
SP ヘッダ　
****************************************************/
@media(max-width:768px){
  #header{
    top:0;
    left:0;
  
    width: 100vw;
    height:calc(70vw / 5);/* 37px;*/

    padding:0 2.4vw;
  
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .bb-headlogo{
    width:calc(220vw / 5) ;
    height:calc(35vw / 5) ;
  }

  .bb-headline{
    width:calc(200vw / 5) ;
    height:calc(50vw / 5) ;
  }

}


/*****************************************************

boat-blaze  CSS

フッタ　共通部分

*****************************************************/


footer{
  width: 100%;
  padding: 36px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000032;

  font-feature-settings:"palt";
}

.footerin{
  width: 100%;
  max-width: 1040px;

  display: flex;
  justify-content: center;
  align-items: center;
}


.footer_menu{
  margin: 0;
  width:190px;
}

.footer_item{
  display: flex;
  align-items: center;
  margin:24px 0;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  color: #fff;
  font-size: 0.95rem;
}

.footer_itemarr{
  margin: 0 1rem 0 0;
  transform: scale(1.4,0.7);
}

.footattention{
  width:calc(700vw / 12);/*84%*/
  max-width:700px; /*1008px;960px*/
  /*border: 1px #fff solid;*/
  margin:0 0 0 min(calc(150vw / 12),150px);
}

.footattentiont_txt{
  margin: 0;
  color:#fff;
  font-size: 0.85rem;
  line-height: 2;
  letter-spacing: 1px;
}

.footer_logo{
  margin:0 0 20px 0;
  width: 461px;
  height: 74px;
}

.footer_copyright{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  color:#fff;
  font-size: 0.7rem;
  background-color: #000;
  letter-spacing: 1px;
}


/*footer tablet*/
@media(max-width:768px){
  .footerin{
    width: 100%;
    max-width: 1040px;
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .footattention{
    width:100%;
    max-width:initial;
    margin:20px 0 0 0;
    padding: 0 16px;
  }

  .footer_logo{
    margin:20px auto 0 auto;
    width: 454px;
    height: 57px;
  }

}

/*footer SP*/
@media(max-width:786px){
  footer{
    width: 100vw;
    padding: calc(24vw / 5) 0;
  }
  
  .footerin{
    width: 100%;
    max-width: initial;

    padding:0 calc(36vw / 5);
  
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items:flex-start;
  }
  
  
  .footer_menu{
    margin: 0;
    width:100%;
  }
  
  .footer_item{
    margin:calc(20vw / 5) 0;
    width: 100%;

    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .footattention{
    width:100%;/*84%*/
    padding: 0;
    max-width:initial;
    margin:calc(24vw / 5) 0 0 0;
  }
  
  .footattentiont_txt{
    margin: 0;
    color:#fff;
    font-size: 0.95rem;
    line-height: 1.8;
  }
  
  .footer_logo{
    margin:calc(25vw / 5) 0 calc(15vw / 5) 0;
    width: calc(400vw / 5);
    height:auto;
  }
  
  .footer_copyright{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 6px 0;
    text-align: center;
    font-size: 0.6rem;
  }

}

/*********************************************

bb css
sec001
PC


*******************************************/

.bb-sec001{
  position: relative;
  padding: 20vw 0 10vw 0;
  width: 100%;
  height: calc(733vw / 12);
  max-height: 1000px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.bb-sec001inner{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0);
}
.bg1{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vw;/*100vh*/
   background-image:url("../image/bb-topbg1.webp");
   background-size:cover;
   background-position: top -15vw center;
   background-repeat: no-repeat;
   z-index: -1;
}

.bb-sec001 .bb-sec1img{
  position: relative;
  z-index: 1;
  width: calc(969vw / 12);
  max-width: 969px;
  height: auto;
}

/*
.bb-sec1img{
  position: relative;
  z-index: 1;
  margin: calc(10vw / 12) 0 0 0;
  width: calc(500vw / 12);
  max-width: 500px;
  height: auto;
}
*/


/**********************************************

bb css
sec001
SP

***********************************************/
@media(max-width:768px){

.bb-sec001{
  padding:0;
  width: 100vw;
  height: calc(524vw / 5);/*524vw*/
  max-height: initial;
}

.bg1{
   top: 0;
   left:0;
   background-image:url("../image/bb-topbg_sp.webp");

   width: 100vw;
   height: 100vw;

   background-size:cover;
   background-position: center;
   background-repeat: no-repeat;
}

.bb-sec001 .bb-sec1img{
  position: relative;
  z-index: 1;
  margin: calc(10vw / 5) 0 0 0;
  width: calc(500vw / 5);
  max-width: initial;
  height: auto;
}


}

/*****************************************************

boat-blaze  CSS
PC
section1

*****************************************************/

/* sec1 */
.bb-sec1{
  margin: 0 auto;
  position:relative;
  width: 100%;
  max-width: 1200px;
  height:733px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.bb-sec1 aside{
    background-image:url("../image/bb-topbg.webp");
    background-position:center;
    background-size:100% 100%;
    background-repeat:no-repeat;
    width:100vw;
    aspect-ratio: 1200 / 733;
    top:0;
    left:0;
    position:fixed;
    z-index:-2;
}

.bb-sec01{
  margin: 0 auto;
  width: 100%;
  height: calc(733vw / 12);
  max-height: 733px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-attachment: fixed;
  background-image:url("../image/bb-topbg.webp");
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}


.bb-sec01 .topimg{
  width: calc(969vw / 12);
  height: auto;
  max-width: 969px;
}

.bb-sec1 img{position:absolute;}
.bb-sec1toplogo{z-index: 3;left:0;right:0;margin:0 auto;top:18%;width: 768px;height: auto;}


.bb-sec1inflm{
  position: relative;
  width: 100%;
  height: 100%;
}

.bb-topboat1{z-index: 2;left:calc(50% - 455px);top:53%;width: 381px;height: auto;}
.bb-topboat2{z-index: 2;left:calc(50% + 30px);top:15%;width: 437px;height: auto;}
.bb-topboat3{z-index: 2;left:calc(50% + 150px);top:45%;width: 376px;height: auto;}


@media(max-width:1199px){
.bb-sec1 aside{
    background-image:url("../image/bb-topbg_sp.webp");
}
}

/*************************************************

BB CSS
sec1~sec2
PC

**************************************************/

.lp-slash{
  margin:-12.8vw 0 0 0;
  padding:16.8vw 0 8.4vw 0;
  clip-path:
    polygon(
      0% 12.8vw,
      100% 0%,
      100% 100%,
      0 100%
    );
}

/* lp-fv-ribbon */
.lp-fv-ribbon{
  margin:-6.4vw 0 0 0;/*margin-bottom:6.2vw;*/
  padding:min(calc(20vw / 12),20px) 0;
  width: 100%;
  height: calc(120vw / 12);
  max-height: 120px;
  transform:skewY(-7.38deg);

  position:relative;
  z-index:1;
  background:linear-gradient(to right,#15107F,#0A08BD,#0302E5);

  display: flex;
  justify-content: center;
  align-items: center;
}

.lp-fv-ribbon2{
  z-index: 4;
  padding:min(4vw,48px) 0;
  height: calc(240vw / 12);
  max-height: 240px;
}


.lp-fv-ribbon:before,.lp-fv-ribbon:after{
  position: absolute;
  content:"";
  display:block;
  width: 100%;
  height:8px;
  background:linear-gradient(to right,#C38E3A,#C38E3A,#E6C750,#CDA451,#EED857,#A06029,#F7ED5F,#F7ED5F,#BE8A38,#E6C54F,#A6856B,#A6856B);
}

.lp-fv-ribbon:before{
  top:0;
  left: 0;
}
.lp-fv-ribbon:after{
  bottom: 0;
  left:0;
}

.lp-fv-ribbon__img{
  margin:0;
  width: calc(761vw / 12);
  max-width: 761px;
  height: auto;
}

.lp-fv-ribbon__img2{
  margin:0;
  width: calc(1016vw / 12);
  max-width:1061px;
  height: auto;
}

.lp-fv-ribbon__bottom{margin-top:-7vw}


/* lp-cta */
.lp-cta{background:url(/img/lp/lp-cta-bg.jpg) center;
  text-align:center;background-size:100% auto;position:relative;z-index:0;}
.lp-cta--top{padding-top:11vw;padding-bottom:11.8vw;}
.lp-cta__qr{position:relative;max-width:912px;margin:10px auto;box-shadow:0 12px 8px black;}
.lp-cta__qr-bg{width:100%;}
.lp-cta__qr-code{position:absolute;right:30px;width:164px;top:50%;transform:translateY(-50%);image-rendering:pixelated;}
.lp-cta__attention{color:white;text-shadow:0 2px 1px black;font-size:14px;position:relative;}
.lp-cta .inview-custom .lp-cta__head,
.lp-cta .inview-custom .lp-cta__qr{opacity:0;}
.lp-cta .inview-custom__active .lp-cta__head{animation:inview-popup .6s forwards ease-out;animation-delay:.2s;}
.lp-cta .inview-custom__active .lp-cta__qr{animation:inview-popup .6s forwards ease-out;animation-delay:.4s;}

/*************************************************

BB CSS
sec1~sec2
SP

**************************************************/
@media(max-width:768px){

/* lp-fv-ribbon */
.lp-fv-ribbon{
  margin:-12.8vw 0 0 0;/*margin:-6.4vw 0 0 0; margin-bottom:6.2vw;*/
  padding:2.5vw 0;
  width: 100%;
  height: calc(70vw / 5);
  max-height: initial;
  transform:skewY(-7.38deg);

  position:relative;
  z-index:1;
}

/*Re ribbon*/
.lp-fv-ribbon2{
  z-index: 4;
  padding:7.5vw 0;
  height: calc(140vw / 5);
  max-height: initial;
}


.lp-fv-ribbon:before,.lp-fv-ribbon:after{
  position: absolute;
  content:"";
  display:block;
  width: 100%;
  height:6px;
  background:linear-gradient(to right,#C38E3A,#C38E3A,#E6C750,#CDA451,#EED857,#A06029,#F7ED5F,#F7ED5F,#BE8A38,#E6C54F,#A6856B,#A6856B);
}


.lp-fv-ribbon__img{
  margin:0;
  width: calc(447vw / 5);
  max-width: initial;
  height: auto;
}

.lp-fv-ribbon__img2{
  margin:0;
  width: calc(447vw / 5);
  max-width:initial;
  height: auto;
}


}

/******************************************************

BB css
sec2
PC

********************************************************/

.bb-sec2{
  margin:-6.4vw 0 0 0;
  width: 100%;
  height:calc(685vw / 12) ;
  max-height:685px;

  background-image: url("../image/bb-sec2bg.webp");
  background-position:  center;
  background-size: 100% 100%;
  position: relative;
  z-index: 3 !important;
  clip-path: polygon(0 12.8vw, 100% 0, 100% 87.2vw, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.bb-sec2flm{
  position: relative;
  z-index: 9 !important;
  width: 100%;
  max-width: 1200px;
  height:calc(540vw / 12);
  max-height: 540px;

  padding: 12.8vw 0 8% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-image: url("../image/bb-sec2flm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bb-sec2btnflm{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bb-sec2linebtn{
  width: 416px;
  max-width: calc(416vw / 12);
  height: auto;
  margin: 0 14px;
}

.bb-sec2arr{
  width: calc(138vw / 12);
  max-width: 138px;
  height: auto;
}

.bb-sec2txt{
  margin: 2% 0 0 0;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  letter-spacing: 1px;
}

/******************************************************

BB css
sec2
SP

********************************************************/

@media(max-width:768px){

.bb-sec2{
  margin:-6.4vw 0 0 0;
  width: 100vw;
  height:calc(384vw / 5) ;
  max-height:initial;

  background-image: url("../image/bb-sec2bg_sp.webp");
  background-position:  center;
  background-size: 100% 100%;

  clip-path: polygon(0 12.8vw, 100% 0, 100% 87.2vw, 0 100%);

}


.bb-sec2flm{
  width: calc(500vw / 5);
  max-width: initial;
  height:calc(275vw / 5);
  max-height: initial;

  padding: 12.8vw 0 8% 0;
  background-image: url("../image/bb-sec2flm_sp.webp");
}

.bb-sec2btnflm{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bb-sec2linebtn{
  width: calc(276vw / 5);
  max-width: initial;
  height: auto;
  margin: 0 1.5vw;
}

.bb-sec2arr{
  width: calc(75vw / 5);
  max-width: initial;
  height: auto;
}

.bb-sec2txt{
  margin: 2% 0 0 0;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0;
}


}

/*********************************************

bb css
sec3
PC

*******************************************/
.bb-sec3{
  position:relative;
  z-index: 3;
  width: 100%;
  height:auto;

  margin: -12.4vw 0 0 0;
  padding:calc(120vw / 12) 0 calc(64vw / 12) 0;

  background-image:url("../image/bb-sec3bg.webp");
  background-position:top center;
  background-size:cover;
  background-repeat:no-repeat;
}

.bb-sec3head{
  width: 100%;
  display: flex;
  justify-content: center;
}

.bb-sec3ttl1{
  width: calc(365vw / 12);
  max-width: 365px;
  height: auto;
}

.bb-sec3body{
  margin: 20px auto 0 auto;
  width:calc(706vw / 12);
  max-width: 706px;
  height: calc(420vw / 12);
  max-height: 420px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bb-sec3ttl2{max-width: 707px;width:calc(707vw / 12);height: auto;}

.bb-sec3txt1{max-width:704px;width:calc(704vw / 12);height: auto;}
.bb-sec3txt2{max-width: 613px;width:calc(613vw / 12);height: auto;}
.bb-sec3txt3{max-width: 670px;width:calc(670vw / 12);;height: auto;}



.bb-sec3 aside{
    background-image:url("../image/bb-sec3bg.webp");
    background-position:top center;
    background-size:cover;
    background-repeat:no-repeat;
    width:100vw;
    height:100%;
    top:0;
    left:0;
    position:fixed;
    z-index:-2;
}

.zindex__active aside{
  z-index: -1;
}

/*********************************************

bb css
sec3
SP

*******************************************/
@media(max-width:768px){

.bb-sec3{
  position:relative;
  z-index: 3;
  width: 100vw;
  height:auto;

  margin: -12.4vw 0 0 0;
  padding:calc(60vw / 5) 0 calc(34vw / 5) 0;

  background-image:url("../image/bb-sec3bg_sp.webp");
}

.bb-sec3head{
  width: 100%;
  display: flex;
  justify-content: center;
}

.bb-sec3ttl1{
  width: calc(300vw / 5);
  max-width: initial;
  height: auto;
}

.bb-sec3body{
  margin: 4vw auto 0 auto;
  width:calc(398vw / 5);
  max-width: initial;
  height: calc(484vw / 5);
  max-height: initial;
}

.bb-sec3ttl2{max-width: initial;width:calc(395vw / 5);height: auto;}

.bb-sec3txt1{max-width:initial;width:calc(398vw / 5);height: auto;}
.bb-sec3txt2{max-width:initial;width:calc(402vw / 5);height: auto;}
.bb-sec3txt3{max-width:initial;width:calc(394vw / 5);;height: auto;}


}


/*********************************************

bb css
sec4
PC

*******************************************/

.boatrace-slider{
  width: 100%;
  height: auto;
}

.bb-sec4{
   padding: calc(40vw / 12) 0;
  /*padding:6.4vw 0 16.8vw 0;*/
   position: relative;
   width: 100%;
   height: auto;

   display: flex;
   flex-direction: column;
   justify-content: flex-start;/*center*/
   align-items: center;
}
.bb-sec4inner{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0);
}
.bg4{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-image:url("../image/bb-sec4bg.webp");
   background-size: cover;
   background-position: center;
   z-index: -1;
}

.bb-sec4head{
  position: relative;
  z-index: 2;
  margin: 0;
  width: calc(663vw / 12);
  max-width: 663px;
  height: auto;
}

.bb-performflm{
  margin: calc(20vw / 12) 0 0 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.bb-pfimg{
  margin: 10px 10px;
  width:321px;
  height:291px;
}

.bb-sec4ttl2{
  position: relative;
  z-index: 2;
  margin: calc(10vw / 12) 0 0 0;
  width: calc(1091vw / 12);
  max-width: 1091px;
  height: auto;
}

/*********************************************

bb css
sec4
SP

*******************************************/
@media(max-width:768px){

.bb-sec4{
   padding: calc(40vw / 12) 0;
  /*padding:6.4vw 0 16.8vw 0;*/
}

.bg4{
   background-image:url("../image/bb-sec4bg_sp.webp");
}

.bb-sec4head{
  margin: 0;
  width: calc(500vw / 5);
  max-width: initial;
  height: auto;
}

.bb-performflm{
  margin: calc(20vw / 5) 0 0 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.bb-pfimg{
  margin: 10px 10px;
  width:321px;
  height:291px;
}

.bb-sec4ttl2{
  margin: calc(10vw / 5) 0 0 0;
  width: calc(500vw / 5);
  height: auto;
}

}


/******************************************************

BB css
PC
sec4 performance

********************************************************/

.bb-performbg{
  margin: 10px 10px;
  padding: 16px 1px 10px 1px;/*16px 20px 16px 20px;*/
  width:321px;
  height: 291px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  background-image:url("../image/bb-performbg.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.bb-planimg{
  width: 280px;
  height: 150px;
}

.bb-performdate{
  margin: 7px 0 0 0;
  color: #fff;
  font-size: 1rem;
  text-align: center;
}

.bb-performrace{
  color: #fff;
  font-size: 1.2rem;
  font-family: 700;
  text-align: center;
}

.bb-performvalue{
  color: #fff000;
  font-size: 2.2rem;
  font-weight: 900;
  transform: scale(0.8, 1);
  font-style: italic;
  text-align: center;
}

.bb-performvaluetxt1{
  font-size: 0.7em;

}

.bb-performvaluetxt2{
  color: #00ffff;
  font-size: 0.7em;
}

/******************************************************

BB css
sec5
PC

********************************************************/
.bb-sec5{
  position:relative;
  margin: 0;
  padding:0;
  width: 100%;
  /*aspect-ratio: 1200 / 400;*/
  height: auto;
  max-height: 400;

  display: flex;
  justify-content:center;
  align-items:flex-start;

  background-image:url("../image/bb-sec5bg.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.bb-sec5:before,.bb-sec5:after{
  position: absolute;
  content:"";
  display:block;
  width: 100%;
  height:8px;
  background:linear-gradient(to right,#C38E3A,#C38E3A,#E6C750,#CDA451,#EED857,#A06029,#F7ED5F,#F7ED5F,#BE8A38,#E6C54F,#A6856B,#A6856B);
}

.bb-sec5:before{
  top:0;
  left: 0;
}
.bb-sec5:after{
  bottom: 0;
  left:0;
}

.lp-fv-ribbon__img{
  margin:0;
  width: calc(761vw / 12);
  max-width: 761px;
  height: auto;
}


.bb-sec5ttl{
  width:calc(1018vw / 12);
  max-width:1018px;
  height: auto;
}


/******************************************************

BB css
sec5
SP

********************************************************/

@media(max-width:768px){
.bb-sec5{
  margin: 0;
  padding:0;
  width: 100%;
  aspect-ratio: 500 / 316;

  display: flex;
  justify-content:center;
  align-items:flex-start;

  background-image:url("../image/bb-sec5bg_sp.webp");
}

.bb-sec5ttl{
  margin: 2vw calc(-39vw / 5) 0 calc(-39vw / 5);
  width:calc(578vw / 5);
  max-width:initial;
  height: auto;
}

}
/******************************************************

BB css
sec6
PC

********************************************************/

.bb-sec6{
  position: relative;
  margin: 0;
  padding:0 0 46px 0;
  width: 100%;
/*  aspect-ratio: 1200 / 841;*/
  height: auto;

  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items:center;

  background-image:url("../image/bb-sec6bg.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.bb-sec6::before{
  bottom:-48px;
  right: 0;
  left: 0;
  margin: 0 auto;
  position:absolute;
  z-index: 2;
  content:"";
  width: 125px;
  height: 62.5px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-color: #0302E3;
}

.bb-sec6ttl1{
  margin: 0;
  width:calc(881vw / 12) ;
  max-width: 881px;
  height: auto;
}

.bb-sec6ttl2{
  margin: 0;
  width:calc(690vw / 12) ;
  max-width:690px;
  height: auto;
}

.bb-sec6ttl3{
  margin: 0;
  width:calc(844vw / 5);
  max-width:844px;
  height: auto;
}

.bb-sec6ttl4{
  margin: 0;
  width: calc(951vw / 5);
  max-width: 951px;
  height: auto;
}

.bb-sec6flx{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bb-sec6item{
  margin: 0;
  width:calc(872vw / 12) ;
  max-width: 872px;
  height:auto;
}

/******************************************************

BB css
sec6
SP

********************************************************/
@media(max-width:768px){

.bb-sec6{
  position: relative;
  margin: 0;
  padding:0 0 calc(26vw / 5) 0;
  width: 100%;
  aspect-ratio: 500 / 925;

  background-image:url("../image/bb-sec6bg_sp.webp");
}

.bb-sec6::before{
  bottom:calc(-48vw / 5);
  right: 0;
  left: 0;
  margin: 0 auto;
  position:absolute;
  z-index: 2;
  content:"";
  width:calc(125vw / 5);
  height:calc(62.5vw / 5);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-color: #0302E3;
}

.bb-sec6ttl1{
  margin: 0;
  width:calc(500vw / 5) ;
  max-width: initial;
  height: auto;
}

.bb-sec6ttl2{
  margin: 0;
  width:calc(334vw / 5) ;
  max-width: initial;
  height: auto;
}

.bb-sec6ttl3{
  margin: 0;
  width:calc(397vw / 5);
  max-width: initial;
  height: auto;
}

.bb-sec6ttl4{
  margin: 0;
  width: calc(452vw / 5);
  max-width: initial;
  height: auto;
}

.bb-sec6item{
  margin: 0;
  width:calc(491vw / 5) ;
  max-width: initial;
  height:auto;
}


}

/*********************************************

bb css
sec7
PC

*******************************************/
/*.bb-sec2{
  margin:-6.4vw 0 0 0;
  width: 100%;
  height:calc(685vw / 12) ;
  max-height:685px;

  background-image: url("../image/bb-sec2bg.webp");
  background-position:  center;
  background-size: 100% 100%;
  position: relative;
  z-index: 1 !important;
  clip-path: polygon(0 12.8vw, 100% 0, 100% 87.2vw, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}*/



.bb-sec7{
  padding:6.4vw 0 20.8vw 0;
   position: relative;
   z-index: 0;
   width: 100%;
   height: auto;

   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}
.bb-sec7inner{
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0);
}
.bg7{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-image:url("../image/bb-sec7bg.webp");
   background-size: cover;
   background-position: center;
   z-index: -2;
}

/*
.bb-sec7::before{
  position: absolute;
  content:"";
  width:374px;
  height: 128px;

  bottom:-30px;
  right: 0;
  left: 0;
  margin: 0 auto;

  background-image:url("../image/bb-sec78txt.webp");
  background-size: cover;
  background-position: center;
}*/


.bb-sec7_3flm{
  position: relative;
  z-index: 0;
  width: calc(1046vw / 12);
  max-width: 1046px;
  height: auto;

 /* 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
*/
}



.bb-sec7row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bb-sec7_footttl{
  margin:4vw 0 0 0;
  position: relative;
  z-index: 0;
  width: calc(1001vw / 12);
  max-width: 1001px;
  height: auto;
}

/*オーバーレイ　テスト*/
.bb-sec7testimg{
  position: relative;
  z-index: 1;
  margin: calc(10vw / 12) 0 0 0;
  width: calc(500vw / 12);
  max-width: 500px;
  height: auto;
  mix-blend-mode: overlay; /* オーバーレイを指定 */
}

/*オーバーレイ　テスト*/
.testtext {
  margin: 0;
  position: absolute;
  mix-blend-mode: hard-light; /* オーバーレイを指定 */
  color: white;
  font-size: 150px;
  font-weight: bold;
  top: 200px;
  left: 30px;
}

/*********************************************

bb css
sec7
sp

*******************************************/
@media(max-width:768px){

.bb-sec7{
  padding:6.4vw 0 26.8vw 0;
}

.bg7{
   background-image:url("../image/bb-sec7bg_sp.webp");
}

.bb-sec7_3flm{
  position: relative;
  z-index: 0;
  width: calc(500vw / 5);
  max-width: initial;
  height: auto;
}

.bb-sec7_footttl{
  margin:4vw 0 0 0;
  position: relative;
  z-index: 0;
  width: calc(420vw / 5);
  max-width: initial;
  height: auto;
}

}


/*********************************************

bb css
sec8 & 78
PC

*******************************************/

.bb-sec8bgout{
  margin: -32.8vw 0 0 0;
  padding: 16.8vw 0;
width: 100%;
height: auto;
position: relative;
z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background-color: transparent;
}

.bb-sec8bgout::before{
  position: absolute;
  z-index: -1;
  content: "";

  width: 100%;
  height:100%;
  clip-path: polygon(0 12.8vw, 100% 0, 100% 100%, 0% 100%);

  background-image:url("../image/bb-sec8bg.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;
}

.bb-sec8bg{
  position: relative;
  z-index: 3;
  margin: -12.8vw 0 0 0;
  padding: 16.8vw 0;
  width: 100%;
  height:auto;
  clip-path: polygon(0 12.8vw, 100% 0, 100% 100%, 0% 100%);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background-image:url("../image/bb-sec8bg.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
/*
  background-image:url("../image/bb-sec78txt.webp"),url("../image/bb-sec8bg.webp");
  background-repeat: no-repeat,no-repeat;
  background-size:374px 128px,cover;
  background-position:top 30px left 0px, center;
*/
}


/*.bb-sec8bg::after{
  position: absolute;
  content:"";
  width:374px;
  height: 128px;

  top:-30px;
  right: 0;
  left: 0;
  margin: 0 auto;

  background-image:url("../image/bb-sec78txt.webp");
  background-size: cover;
  background-position: center;
}*/

.bb-sec78bg{
  position: absolute;
  z-index: 4;
  top:-30px;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}


.bb-sec78{
/*
  top:-30px;
  right: 0;
  left: 0;
  margin: 0 auto;
*/

  margin:0 auto 40px auto;
  width:374px;
  height: 128px;
}

.bb-sec8ttl1{
margin: 0;
width:calc(800vw / 12) ;
max-width:800px;
height: auto;
}

.bb-sec8flm{
margin: -4.2vw 0 0 0;
padding:min(200px,16.6vw) 0;
width: calc(1200vw / 12);
min-height: 1910px;
height: auto;
/*aspect-ratio: 1200 / 1910;*/

display: flex;
flex-direction: column;
justify-content:space-between;
align-items: center;

  background-image:url("../image/bb-sec8flmbg.webp");
  background-size:100% 100%;
  background-position: center;
}

.bb-sec8txt1{
margin: 0;
width:calc(666vw / 12) ;
max-width:666px;
height: auto;
}

.bb-sec8txt2{
margin: 0;
width:calc(641vw / 12) ;
max-width:641px;
height: auto;
}

.bb-sec8txt3{
margin: 0;
width:calc(875vw / 12) ;
max-width:875px;
height: auto;
}

.bb-sec8txt4{
margin: 0;
width:calc(905vw / 12) ;
max-width:905px;
height: auto;
}

.bb-sec8txt5{
margin: 0;
width:calc(860vw / 12) ;
max-width:860px;
height: auto;
}

.bb-sec8txt6{
margin: 0;
width:calc(855vw / 12) ;
max-width:855px;
height: auto;
}

.bb-sec8img{
margin: 0;
width:calc(751vw / 12) ;
max-width:751px;
height: auto;
}

.bb-sec8ttl2{
margin: 0;
width:calc(866vw / 12) ;
max-width:866px;
height: auto;
}

.bb-sec8ttl3{
margin:4.2vw 0 0 0;
width:calc(908vw / 12) ;
max-width:908px;
height: auto;
}


/*
@media(min-width:1210px){
  .bb-sec78{
  top:130vh;
  }
}

@media(max-width:1140px){
  .bb-sec78{
  top:80vh;
  }
}*/

/*********************************************

bb css
sec8 & 78
SP

**********************************************/

@media(max-width:768px){

  .bb-sec8bgout{
margin: -32.8vw 0 0 0;
padding:12.8vw 0 16.8vw 0;
width: 100%;
height: auto;
position: relative;
z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background-color: transparent;
}

.bb-sec8bgout::before{
  position: absolute;
  z-index: -1;
  content: "";

  width: 100%;
  height:100%;
  clip-path: polygon(0 12.8vw, 100% 0, 100% 100%, 0% 100%);

  background-image:url("../image/bb-sec8bg_sp.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;
}

.bb-sec8bg{
  position: relative;
  margin: -12.8vw 0 0 0;
  padding: 16.8vw 0;
  width: 100%;
  height:auto;
  clip-path: polygon(0 12.8vw, 100% 0, 100% 100%, 0% 100%);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background-image:url("../image/bb-sec8bg_sp.webp");
  background-size: cover;
  background-position: center;
}

.bb-sec8ttl1{
  margin: 0;
  width:calc(500vw / 5) ;
  max-width:initial;
  height: auto;
}

.bb-sec8flm{
  margin: -4.2vw 0 0 0;
  padding: 18.4vw 0;
  width: calc(500vw / 5);
  height: calc(1242vw / 5);
  /*aspect-ratio: 500 / 1242;*/
  min-height: calc(1242vw / 5);
  background-image:url("../image/bb-sec8flmbg_sp.webp");
  background-size: cover;

}

.bb-sec8txt1{
margin: 0;
width:calc(329vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec8txt2{
margin: 0;
width:calc(356vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec8txt3{
margin: 0;
width:calc(369vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec8txt4{
margin: 0;
width:calc(397vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec8txt5{
margin: 0;
width:calc(860vw / 12) ;
max-width:initial;
height: auto;
}

.bb-sec8txt6{
margin: 0;
width:calc(366vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec8img{
margin: 0;
width:calc(407vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec8ttl2{
margin: 0;
width:calc(430vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec8ttl3{
margin:4.2vw 0 0 0;
width:calc(454vw / 5) ;
max-width:initial;
height: auto;
}

.bb-sec78{
  /*
  position: absolute;
  top:52.5%;
  right: 0;
  left: 0;
  margin: 0 auto;
  z-index: 3;
  content:"";*/

  margin:0 auto;
  width:calc(294vw / 5);/* 327vw / 5 */
  height:calc(108vw / 5);/* 112vw / 5 */
}


}



/************************************************************/

.inview-popup{opacity:0;transform:scale(0);}
.inview-popup__active{animation:inview-popup 0.5s forwards ease;animation-delay:.2s;}
@keyframes inview-popup{0%{transform:scale(0);opacity:0;}33%{transform:scale(1.08);opacity:1;}66%{transform:scale(0.96);opacity:1;}100%{transform:scale(1);opacity:1;}}
.inview-fadein{opacity:0;}
.inview-fadein__active{animation:inview-fadein .5s forwards ease;animation-delay:.2s;}
@keyframes inview-fadein{0%{opacity:0;}100%{opacity:1;}}
.inview-skew-slide{opacity:0;}
.inview-skew-slide__active{animation:inview-skew-slide 0.4s forwards;animation-delay:0.2s;}
@keyframes inview-skew-slide{0%{opacity:0;transform:translate(-8vw,1.6vw)}100%{opacity:1;transform:translate(0,0)}}
.inview-slide{opacity:0;}
.inview-slide__active{animation:inview-slide 0.4s forwards;animation-delay:0.2s;}
@keyframes inview-slide{0%{opacity:0;transform:translateX(-8vw)}100%{opacity:1;transform:translateX(0)}}
.inview-slide-right{opacity:0;}
.inview-slide-right__active{animation:inview-slide-right 0.4s forwards;animation-delay:0.2s;}
@keyframes inview-slide-right{0%{opacity:0;transform:translateX(8vw)}100%{opacity:1;transform:translateX(0)}}

/************************************************************/