@charset "utf-8";
/* CSS Document */
.brt_header{background-color: transparent;}
.brt_header.active{background-color: rgba(255,255,255,0.5);}
.brt_header h1 img:nth-of-type(2){display: none;}

.brt_indextop{
  position: relative;
  height: 824px;
}
.brt_bgslide{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
.brt_bgslide li{
  background-size: cover;
  background-position: center center;
}
.brt_zoomanim{animation: fadezoom 20s linear forwards;}
@keyframes fadezoom{
  0%{transform: scale(1);}
  100%{transform: scale(1.2);}
}
.brt_slide01{background: url("../img/index/ph_slide01.jpg?2") no-repeat;}
.brt_slide02{background: url("../img/index/ph_slide02.jpg?2") no-repeat;}
.brt_slide04{background: url("../img/index/ph_slide04.jpg?2") no-repeat;}
.brt_slide05{background: url("../img/index/ph_slide05.jpg?2") no-repeat;}
.brt_slide06{background: url("../img/index/ph_slide06.jpg") no-repeat;}
.brt_overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255,255,255,0.5);
  z-index: 5;
}
.brt_catch{
  position: relative;
  padding-top: 300px;
  z-index: 10;
}
.brt_catch p{
  display: inline-block;
  padding: 0 16px 16px;
  background-image: linear-gradient(transparent 0, transparent 40%, rgba(255,255,255,0.8) 40%, rgba(255,255,255,0.8) 100%);
  transform: translateY(50px);
  opacity: 0;
}
.brt_catch p:first-of-type{
  margin-bottom: 42px;
  transition: all 1s ease-out 0.2s
}
.brt_catch p:last-of-type{transition: all 1s ease-out 0.2s}
.brt_catch p.active{
  transform: translate(0);
  opacity: 1;
}
.brt_catch img{max-width: 100%;}

.brt_copy{padding: 10px 0 128px;}
.brt_copy h2{
  position: relative;
  text-align: center;
  font-family: Oswald;
  font-size: 10.625rem;
  font-weight: bold;
  color: #212121;
}
.brt_copy p{
  line-height: 2;
  text-align: right;
  font-size: 1.875rem;
  font-weight: 500;
  color: #212121;
}
/*animation追加*/
.brt_copy h2.active.scrl b:nth-of-type(1){animation: colorchange 0.1s steps(4);}
.brt_copy h2.active.scrl b:nth-of-type(2){animation: colorchange 0.1s steps(4) 20ms;}
.brt_copy h2.active.scrl b:nth-of-type(3){animation: colorchange 0.1s steps(4) 40ms;}
.brt_copy h2.active.scrl b:nth-of-type(4){animation: colorchange 0.1s steps(4) 60ms;}
.brt_copy h2.active.scrl b:nth-of-type(5){animation: colorchange 0.1s steps(4) 80ms;}
.brt_copy h2.active.scrl b:nth-of-type(6){animation: colorchange 0.1s steps(4) 100ms;}
.brt_copy h2.active.scrl b:nth-of-type(7){animation: colorchange 0.1s steps(4) 120ms;}
.brt_copy h2.active.scrl b:nth-of-type(8){animation: colorchange 0.1s steps(4) 140ms;}
.brt_copy h2.active.scrl b:nth-of-type(9){animation: colorchange 0.1s steps(4) 160ms;}
.brt_copy h2.active.scrl b:nth-of-type(10){animation: colorchange 0.1s steps(4) 180ms;}
.brt_copy h2.active.scrl b:nth-of-type(11){animation: colorchange 0.1s steps(4) 200ms;}
.brt_copy h2.active.scrl b:nth-of-type(12){animation: colorchange 0.1s steps(4) 220ms;}
.brt_copy h2.active.scrl b:nth-of-type(13){animation: colorchange 0.1s steps(4) 240ms;}
@keyframes colorchange{
  0%{color: #212121;}
  25%{color:#3B7BCA;}
  50%{color:#E9635D;}
  75%{color:#F21E36;}
  100%{color:#212121;}
}




.brt_bizcontainer{
  position: relative;
  overflow: hidden;
}

.brt_fixtxt{
  position: absolute;
  left: calc(50% - 620px);
  top: 150px;
  transition: opacity 0.25s linear;
}
.brt_fixtxt.fix{position: fixed;}
.brt_fixtxt.end{opacity: 0;}

.brt_bgtxt{
  position: absolute;
  left: 0;
  top: -150px;
  font-family: Oswald;
  font-size: 20.25rem;
  font-weight: bold;
  color: #3B7BCA;
  opacity: 0.1;
}
.brt_bgtxt::after{transition-delay: 0.5s;}
.brt_txtbox{transition-delay: 0.5s;}
.brt_h2{
  margin-bottom: 10px;
  font-family: Oswald;
  font-size: 1.125rem;
  font-weight: 900;
  color: #212121;
}
.brt_h2::after{
  content: "";
  display: inline-block;
  width: 56px;
  margin-left: 18px;
  vertical-align: middle;
  border-top: 1px solid #212121;
}
.brt_alphabet{
  margin-bottom: 40px;
  font-family: "Oswald";
  font-size: 4.5rem;
  font-weight: bold;
  color: #3B7BCA;
}
.brt_bold{
  margin-bottom: 24px;
  font-size: 1.375rem;
  font-weight: bold;
  color: #212121;
}
.brt_txt01{color: #333333;}


.brt_rightcol{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10;
  right: 100%;
  transition: right 0.25s ease 0.23s, width 0s ease;
}
.brt_rightcol.active{
  width: calc(50% - 468px);
  right: 0;
}

.brt_bizbox{
  position: relative;
  width: 650px;
  margin: 0 8px 0 auto;
  padding: 128px 0 160px;
  z-index: 20;
}
.brt_bizbox figure{
  position: relative;
  margin-bottom: 72px;
  transition: all 1s ease-out 0.5s;
  transform: translateY(10px);
  opacity: 0;
}
.brt_bizbox figure:nth-of-type(2){transition: all 1s ease-out 0.7s;}
.brt_bizbox figure:nth-of-type(3){transition: all 1s ease-out 0.9s;}
.brt_bizbox figure:last-of-type{
  transition: all 1s ease-out 1.1s;
  margin-bottom: 0;
}
.brt_bizbox.active figure{
  transform: translateY(0);
  opacity: 1;
}
.brt_bizbox figure>a{
  display: block;
  margin-bottom: 32px;
  overflow: hidden;
}
.brt_bizbox figure a img{
  width: 100%;
  transition: all 0.2s ease-out;
}
.brt_credit{
  position: absolute;
  right: 8px;
  top: 344px;
  font-weight: bold;
  color: #000000;
  text-shadow: 1px 1px 0 #FFFFFF, 0 1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, -1px 0 0 #FFFFFF, -1px -1px 0 #FFFFFF, 0 -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, 1px 0 0 #FFFFFF;
}
.brt_bizbox figure figcaption{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brt_bizbox figure figcaption div:first-of-type{
  width: 486px;
  padding-right: 16px;
}
.brt_bizbox figure h3{
  margin-bottom: 24px;
  font-size: 2rem;
  font-weight: bold;
  color: #212121;
}
.brt_bizbox figure p{color: #707070;}
.brt_bizbox figure figcaption div:last-of-type{
  width: 164px;
  text-align: center;
}
.brt_bizbox figure figcaption div a{
  display: block;
  text-align: center;
  font-family: "Noto Serif";
  font-size: 0.875rem;
  font-weight: 400;
  color: #FFFFFF;
}
.brt_bizbox figure figcaption div a img{
  width: 40px;
  margin-left: 8px;
  vertical-align: middle;
}



.brt_news{
  padding: 80px 0 126px;
  background: url("../img/index/il_newsbg.svg") calc(50% + 274px) 96px no-repeat;
  background-color: #FAFAFA;
  opacity: 0;
  transition: all 0.25s ease-out;
}
.brt_news .brt_h2{
  opacity: 0;
  transition: all 0.25s ease-out 0.2s;
}
.brt_jp{
  margin-bottom: 20px;
  font-size: 3.125rem;
  font-weight: bold;
  color: #212121;
  opacity: 0;
  transition: all 0.25s ease-out 0.2s;
}
.brt_news.active,
.brt_news.active .brt_h2,
.brt_news.active .brt_jp{
  opacity: 1;
}

.brt_news .brt_newslist{
  padding: 56px 104px 80px;
  background-color: rgba(255,255,255,0.8);
  opacity: 0;
  transition: all 0.25s ease-out;
}
.brt_news .brt_newslist li{
  position: relative;
  margin-bottom: 38px;
  padding-bottom: 38px;
  border-bottom: 1px solid #DDDDDD;
}
.brt_news .brt_newslist li:last-of-type{margin-bottom: 0;}
.brt_news .brt_newslist dl dt{
  margin-bottom: 12px;
  color: #3B7BCA;
  transition: all 1s ease-out;
  transform: translateY(10px);
  opacity: 0;
}
.brt_news .brt_newslist dl dt span{
  display: inline-block;
  width: 136px;
  height: 24px;
  margin-left: 24px;
  text-align: center;
  font-size: 0.875rem;
  border-radius: 2px;
  border: 1px solid #3B7BCA;
}
.brt_news .brt_newslist dl dd{
  color: #212121;
  transition: all 1s ease-out;
  transform: translateY(10px);
  opacity: 0;
}
.brt_news .brt_newslist dl dd p:nth-last-of-type(n+2){margin-bottom: 16px;}
.brt_news .brt_newslist dl dd a{color: #212121;}
.brt_news .brt_newslist dl dd a span{font-size: 0.75rem; vertical-align: baseline;}

.brt_news .brt_newslist figure{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 1s ease-out;
  transform: translateY(10px);
  opacity: 0;
}
.brt_news .brt_newslist.active figure{
  transform: translateY(0);
  opacity: 1;
}
.brt_news .brt_newslist figure>p{width: 416px;}
.brt_news .brt_newslist figure img{width: 100%;}
.brt_news .brt_newslist figure figcaption{width: 568px;}

.brt_news .brt_newslist.active{opacity: 1}
.brt_news .brt_newslist.active dt,
.brt_news .brt_newslist.active dd{
  transform: translateY(0);
  opacity: 1;
}




/*ホバーエフェクト*/
@media screen and (min-width:820px){
  .brt_bizbox figure>a:hover img{transform: scale(1.1);}
  .brt_bizbox figure figcaption div a:hover{opacity: 0.5;}

  .brt_news .brt_newslist dl dd a:hover{text-decoration: underline;}
}






@media screen and (min-width:1600px){
  .brt_copy h2{font-size: 12.625rem;}
  .brt_rightcol{width: calc((100% - 1520px)/2 + 220px);}
  .brt_bizcontainer .brt_wrap{width: 1280px;}
  .brt_news .brt_wrap{width: 1280px;}
}
@media screen and (max-width:1330px){
  .brt_copy h2{font-size: 11.6vw;}
}
@media screen and (max-width:1280px){
  .brt_rightcol.active{width: calc(50% - 382px);}
  .brt_fixtxt{left: 16px;}
  .brt_bgtxt{font-size: 25.3vw;}

  .brt_bizbox{margin-right: 0;}


.brt_news .brt_newslist figure>p{width: 38%;}
.brt_news .brt_newslist figure figcaption{width: 60%;}
}




/*-----------------------------------------*/
/*--------------レスポンシブ-------------*/
/*-----------------------------------------*/
@media screen and (max-width:820px){
  .brt_header h1 img:nth-of-type(1){display: none;}
  .brt_header h1 img:nth-of-type(2){display: inline;}

  .brt_bgslide li.brt_slide02{background-position: 40% center;}


  .brt_catch{
    position: fixed;
    top: 300px;
    left: 18px;
    padding: 0;
    transition: all 0.2s linear;
  }
  .brt_catch.active{
    opacity: 0;
    z-index: 1;
  }
  .brt_catch p{padding: 0 8px 10px;}
  .brt_catch p:first-of-type{margin-bottom: 18px;}
  .brt_catch img{height: 30px;}



  .brt_copy{padding: 24px 18px 64px;}
  .brt_copy h2{font-size: 12vw;}
  .brt_copy p{font-size: 0.75rem;}



  .brt_fixtxt{
    position: static;
    margin-bottom: 64px;
    padding: 0 18px;
  }
  .brt_fixtxt.fix{position: static;}
  .brt_bgtxt{
    top: -44px;
    font-size: 6.875rem;
  }
  .brt_alphabet{
    margin-bottom: 5px;
    font-size: 2.375rem;
  }
  .brt_bold{font-size: 1.125rem;}
  .brt_rightcol{
    height: calc(100% - 276px);
    top: auto;
    bottom: 0;
  }
  .brt_rightcol.active{width: 32%;}
  .brt_bizbox{
    width: 100%;
    padding: 40px 0 56px;
  }
  .brt_bizbox figure > a{margin-bottom: 18px;}
  .brt_credit{
    top: 47vw;
    font-size: 0.625rem;
  }
  .brt_bizbox figure h3{font-size: 1.125rem;}
  .brt_bizbox figure p{
    line-height: 2;
    font-size: 0.875rem;
    color: #333;
  }
  .brt_bizbox figure figcaption div:first-of-type{
    width: calc(100% - 102px);
    padding-right: 16px;
  }
  .brt_bizbox figure figcaption div:last-of-type{width: 102px;}
  .brt_bizbox figure figcaption div a{font-size: 0.75rem;}
  .brt_bizbox figure figcaption div a img{
    width: 20px;
    margin-left: 6px;
  }



  .brt_news{
    padding: 48px 0 88px;
    background-size: 84%;
    background-position: right -75px top 53px;
  }
  .brt_h2{
    margin-bottom: 3px;
    font-size: 1rem;
  }
  .brt_jp{
    margin-bottom: 40px;
    font-size: 1.5rem;
  }
  .brt_news .brt_newslist{
    padding: 40px 18px 56px 24px;
    border-radius: 10px;
  }
  .brt_news .brt_newslist li{
    margin-bottom: 28px;
    padding-bottom: 28px;
  }
  .brt_news .brt_newslist dl dt{font-size: 0.75rem;}
  .brt_news .brt_newslist dl dt span{
    width: 100px;
    height: auto;
    vertical-align: baseline;
    font-size: 0.625rem;
  }
  .brt_news .brt_newslist dl dd{font-size: 0.75rem;}
}
@media screen and (max-width:428px){
  .brt_news .brt_newslist figure{flex-wrap: wrap;}
  .brt_news .brt_newslist figure>p{
    width: 100%;
    order: 2;
  }
  .brt_news .brt_newslist figure figcaption{
    width: 100%;
    margin-bottom: 16px;
    order: 1;
  }
}