@charset "UTF-8";
@import url("https://use.typekit.net/rpo6mkh.css");

#menu_new {
margin:0 auto;
padding:0; 
/*border-top:1px solid rgba(175,25,24,0.6);
border-bottom:1px solid rgba(175,25,24,0.6);*/
background-color:rgba(0,0,0,.7);
width:100%;
position: sticky;
top: 0;
z-index:100;
}

/* ボードのボタン */
.board_button {
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

#pc_board_menu {
  position: absolute;
  height: 48px;
  width: 200px;
  right: 20px;
  cursor: pointer;
  bottom: -12px;
  transform: translateY(100%);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.board_button .board_logo {
  background: url('../board/img/vivant_board.png') no-repeat left center / 100% auto;
  width: calc(100% - 30px);
  height: 100%;
  display: block;
  position: relative;
}
.board_button::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/arrow_forward.svg) no-repeat right center; 
}
/* */

/*//////pc//////*/
@media all and (min-width: 768px) {
#menu_new ul {
min-width:100%;
margin:0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
#menu_new li {
text-align:center;
vertical-align: middle;
position: relative;
margin:0;
width: -webkit-calc(100% / 7);
width: calc(100% / 7);
}
#menu_new li.logo {
background: url(../img/logo.svg) no-repeat center center; background-size:80%;
}
#menu_new li a {
width:100%;
height:84px;
display: block;
text-decoration:none;
vertical-align: middle;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition-duration: .5s;
}
#menu_new li a:hover{
background-color:rgba(0,0,0,.4);
}
#menu_new li a p{
font-size:90%;
font-size:clamp(1rem, 0.5rem + 0.9vw, 1.6rem);
z-index:1;
color:#fff;
font-family: "noto-sans-cjk-jp", sans-serif;
font-weight: 700;
font-style: normal;
}
#menu_new li span.eng{
color:#d71718;
display:inline-block;
width:100%;
font-size:clamp(1.5rem, 0.5rem + 2vw, 2.2rem);
vertical-align: middle;
margin:0 0 .3em;
letter-spacing:.05em;
font-family: "anton", sans-serif;
font-weight: 400;
font-style: normal;
}
#menu_new a.current {
  background-color:rgba(0,0,0,.4);
}
#sp_menu,.drawer-wrap,#drawer-checkbox {
  display:none;
}
@media (hover: hover) {
#pc_board_menu:hover,
#pc_board_menu:active {
  background: #d71718;
  opacity: 1;
}
.board_button .board_logo {
  background: none;
}
.board_button .board_logo::before,
.board_button .board_logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  transition: opacity 0.2s;
}
.board_button .board_logo::before {
  background-image: url('../board/img/vivant_board.png');
}
.board_button .board_logo::after {
  background-image: url('../board/img/menu_board_hover.svg');
  background-size: auto 90%;
  opacity: 0;
}
#pc_board_menu:hover .board_logo::before,
#pc_board_menu:active .board_logo::before {
  opacity: 0;
}
#pc_board_menu:hover .board_logo::after,
#pc_board_menu:active .board_logo::after {
  opacity: 1;
}
}

/* トップのバナー位置 */
#top #contents ul.bnr {
  margin-top: 50px;
}
}

@media all and (max-width: 767px) {
#menu_new ul {
display:none;
}
#sp_menu{
padding:3vw 2vw;
background-color:rgba(0,0,0,.7);
width:100%;
position: sticky;
top: 0;
z-index:100;
}
#sp_menu a, #drawer-content a.logo{
width:30vw;
display:block;
aspect-ratio: 433 / 128;
background: url(../img/logo.svg) no-repeat center center; background-size:contain;
}
#drawer-content a.logo{
width:30vw;
margin:2vw 0 0 2.5vw;
}

.drawer-wrap{
    position: absolute;
    top: 0;
    right: 0;	
}
#drawer-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    right: 0;
    z-index:99999;
    width:100%;
    height:100vh;
    transition: all 0.3s ease-in-out 0s;
    transform: translateX(100%);
    background-color:rgba(21,21,21,1);
　-ms-overflow-style: none;
    scrollbar-width: none;
}
#drawer-content::-webkit-scrollbar {
    display: none;
}
#drawer-checkbox:checked ~ .drawer-wrap #drawer-content {
    transform: translateX(0);
}

#drawer-checkbox {
  display: none;
}
#drawer-icon {
  position: absolute;
  top:0; bottom:0; right:2vw;
  margin:auto;
  cursor: pointer;
  z-index:100;
width:7vw;
aspect-ratio: 11 / 15;
background: url(../img/menu.svg) no-repeat center center; background-size:contain;
  display: block;
  z-index:111;
}
#drawer-checkbox:checked ~ #drawer-icon {
}

#drawer-close {
    position: absolute;
    top: 3vw;
    right: 3vw;
    cursor: pointer;
    z-index: 120;
}
.close-icon {
    display: block;
    width: 7vw;
    height: 7vw;
    position: relative;
}
.close-icon::before,
.close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #d71718;
}
.close-icon::before {
    transform: translateY(-50%) rotate(45deg);
}
.close-icon::after {
    transform: translateY(-50%) rotate(-45deg);
}

.nav_wrapper {
  padding-bottom: 20vh;
}
.nav_wrapper .nav_list {
  width: 90%;
  margin: 4vw auto 6vw;
}
.nav_wrapper .nav_list li a {
  background: url(../img/arrow_forward.svg) no-repeat right center; 
  background-size: 3.5zvw;
  display: flex;
  align-items: center; 
  align-content: center;
  padding: 3vw 0;
  text-decoration: none;
  font-size: 3.5vw;
  color: #fff;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;  
  line-height: 1.5;
}
.nav_wrapper .nav_list li span.eng {
  font-size: 6.25vw;
  letter-spacing: .05em;
  font-family: "anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  padding: 0 2vw 0 0;
  line-height: 1;  vertical-align: middle;
  transform: translateY(-0.5vw);
}
.nav_wrapper .title img{
margin:0 auto 2vw;
display:block;
width:auto;
height:14vw;
}
}


/* stream */
.nav_wrapper .title img{
  margin:0 auto .5em;
  display:block;
  width:auto;
  height:98px;
}
.nav_wrapper .stream{
  text-align:center;
  width:100%;
  margin:5em auto;
}
.nav_wrapper .stream ul{
  margin:2em auto 0;
  display: flex; flex-flow: row wrap;
  justify-content:center; 
  align-items: stretch;
  width:100%;
}
.nav_wrapper .stream ul li{
  width:230px;
  margin:0 .5em;
}
.nav_wrapper .stream ul li span.tagline{
  color:#111;
  padding:.6em 0 0;
  font-weight:600;
  font-size:1.2rem;
  display:inline-block;
  line-height:100%;
}
.nav_wrapper .stream ul li a{
  border-radius:4px;
  background-color:rgba(255,255,255,1);
  aspect-ratio: 11 / 3.4;
  display:block;
  background-repeat: no-repeat;
  background-position:center center;
}
.stream ul li.tver a{
  background-image:url(../img/tver.svg);
  background-size:30% !important;
  background-position:center top 70% !important;
}
.stream ul li.realtime a{background-image:url(../img/realtime.svg); background-size:68% !important;}
.stream ul li.tbsfree a{background-image:url(../img/tbsfree.svg); background-size:60% !important;}
.stream ul li.u-next a{
  background-image: url(../img/unext_blk.svg);
  background-size:65% !important;
  background-position:center top 60% !important;
}
.stream ul li.netflix a{background-image: url(../img/netflix.svg); background-size:60% !important;}

.nav_wrapper .sns{text-align:center; width:100%; margin:8vw auto 0;}
.nav_wrapper .sns a{
  width:40px;
  height:40px;
  margin:1.8em 1.5em .5em;
  position: relative;
  display:inline-block;
}
.nav_wrapper .sns a img{
  width:100%;
}
.nav_wrapper p.caution{
  padding:2em 0 0;
  text-align:center;
  font-size:80%;
  color:#fff;
}
@media all and (max-width: 767px) {
.nav_wrapper .stream{
  margin:8vw auto;
}
.nav_wrapper .title img{
  margin:0 auto 2vw;
  height:14vw;
}
.nav_wrapper .stream ul{
  margin:2vw auto 0;
}
.nav_wrapper .stream ul li{
  width:41.5%;
  margin:.8vw;
}
.nav_wrapper .stream ul li.tver span.tagline{
  padding:1vw 0 0 !important;
  font-size:2.15vw;
}
.nav_wrapper .stream ul li.u-next span.tagline{
  padding:1.55vw 0 0;
  font-size:2.15vw;
}
.nav_wrapper .sns{
  margin:8vw auto 0;
}
.nav_wrapper .sns a{
  width:8vw;
  height:8vw;
  margin:2vw 2.5vw;
}
.nav_wrapper p.caution{
  padding:4vw 0 0;
  font-size:2.5vw;
}
}

/* board スマホ */
@media all and (max-width: 767px) {
  #pc_board_menu {
    display: none;
  }
  #sp_board_menu {
    display: flex;
    width: 80%;
    margin: 6vw auto;
    padding: 1.2em 2.4rem;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.7);
    height:fit-content;
  }
  #sp_board_menu .board_menu_text{
    display: flex;
    white-space: nowrap;
    align-items: center;
    gap: 2.2vw;
  }
  #sp_board_menu .board_menu_text p{
    font-size: 2.8vw;
  }
  .board_button .board_logo {
    height: 4.5vw;
    width: auto;
    background-size: auto 100%;
    aspect-ratio: 7 /1;
  }
  .board_button::after {
    height: 4.5vw;
    width: 4.5vw;
  }
}