/* メニューオープン時のスクロール禁止 */
body.on {
overflow-y: hidden;
}


/* menu */

.menu-content {
overflow-x: visible;
margin: auto;
position: relative;
}

.menu-content .off {
opacity: 0.5;
pointer-events: none;
}

.menu-content li {
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-style: dotted;
font-weight: bold;
}

.menu-content a {
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-style: dotted;
font-weight: bold;
color: #fff;
}

#menu_race h1 {
position: relative;
display: block;
width: 432px;
height: 60px;
background: url(../images/con_tit_race.svg) no-repeat left center;
margin-left: 0;
margin-bottom: 17px;
margin-right: 0;
opacity: 1;
}

#menu_race li {
color: #fff;
font-size: 26px;
font-weight: bold;
height: 50px;
width: 72%;
display: block;
position: relative;
}

#menu_race {
position: absolute;
width: 502px;
left: calc(48% - 394px);
margin: 0 !important;
top: 218px;
height: 285px;
display: block;
}


/* MENU内|MOVIE */
#menu_movie h1 {
position: relative;
display: block;
width: 220px;
height: 64px;
background: url(../images/con_tit_mov.svg) no-repeat center center;
background-size: 100%;
margin: 0 0px 13px 0px;
opacity: 1;
}

#menu_movie li {
color: #fff;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
height: 50px;
width: 100%;
display: block;
position: relative;
}

#menu_movie {
position: absolute;
width: 324px;
left: calc(53% + 70px);
top: 572px;
height: 170px;
margin: 0 !important;
display: block;
}

/* MENU内|キャンペーン */
#menu_campaign h1 {
position: relative;
margin: auto;
display: block;
width: 500px;
height: 70px;
background: url(../images/con_tit_mov_cam.svg) no-repeat center center;
background-size: 100%;
margin-bottom: 12px;
opacity: 1;
}

#menu_campaign li {
color: #fff;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
height: 50px;
width: 100%;
display: block;
position: relative;
}

#menu_campaign {
position: absolute;
width: 500px;
left: calc(48% - 394px);
top: 530px;
height: 173px;
margin: 41px 0 0 0 !important;
display: block;
}

/* MENU内|スペシャル */
#menu_spe h1 {
position: relative;
display: block;
width: 244px;
height: 63px;
background: url(../images/con_tit_spe.svg) no-repeat center center;
background-size: 100%;
margin: 0 0 15px 0;
opacity: 1;
}

#menu_spe li {
color: #fff;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
height: 50px;
width: 100%;
display: block;
position: relative;
}

#menu_spe {
position: absolute;
width: 500px;
left: calc(77% - 394px);
top: 173px;
height: 173px;
margin: 41px 0 0 0 !important;
display: block;
}

/* MENU内SNS */
#menu_sns {
display: block;
width: 790px;
height: 50px;
position: absolute;
top: 80px;
left: 0;
right: 0;
margin: auto;
}

#menu_sns ul {
display: flex;
width: 323px;
height: 47px;
position: relative;
margin: auto;
}

#menu_sns ul span {
position: relative;
width: 2px;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.6) 3px 3px 20px;
background: #fff;
opacity: 0.5;
}

#menu_sns ul li {
position: relative;
width: 19%;
height: 100%;
top: 1px;
transition: 0.4s all;
transform: translateY(0px);
}

#menu_sns ul li:hover {
transform: translateY(-5px);
}

#menu_sns ul li a {
position: relative;
width: 100%;
height: 100%;
display: block;
}

#menu_sns ul li.i_fb {
background: url(../images/i_fb.svg) center left 18px no-repeat;
}

#menu_sns ul li.i_twi {
background: url(../images/i_twi.svg) center left 10px no-repeat;
}

#menu_sns ul li.i_you {
background: url(../images/i_you.svg) center left 9px no-repeat;
}

#menu_sns ul li.i_line {
background: url(../images/i_line.svg) center left 9px no-repeat;
}

#menu_sns ul li.i_qr {
background: url(../images/i_qr.svg) center left -1px no-repeat;
}

#menu_sns ul li.i_qr img {
position: relative;
top: -44px;
z-index: 2;
right: -74px;
transition: .3s;
opacity: 0;
width: 90px;
}

#menu_sns ul li.i_qr:hover img {
opacity: 1;
}



/* MENU内|リンク */
#menu_link {
display: block;
width: 565px;
height: 77px;
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: auto;
}

#menu_link ul {
display: flex;
width: 97%;
height: 100%;
margin: auto;
position: relative;
justify-content: space-between;
flex-wrap: nowrap;
}

#menu_link ul li {
width: 173px;
height: 100%;
position: relative;
background: #000;
transition: 0.4s all;
}

#menu_link ul li:hover {
opacity: 0.6;
}

#menu ul li.i_qr:hover {
transform: translateY(0px);
opacity: 1;
}

#menu_link ul li a {
width: 100%;
height: 100%;
position: relative;
display: block;
}

#menu_link ul li.link_live {
background: url(../images/bt_live_pc.png) no-repeat center center;
background-size: 100% auto;
}

#menu_link ul li.link_replay {
background: url(../images/bt_replay_pc.png) no-repeat center center;
background-size: 100% auto;
}

#menu_link ul li.link_vote {
background: url(../images/bt_bet_pc.png) no-repeat center center;
background-size: 100% auto;
}




/* リンクボタン */
#link_btn {
position: fixed;
top: 0;
right: 100px;
z-index: 83;
width: 480px;
height: 80px;
background: url(../images/top_btn_bg.svg);
display: flex;
}

#link_btn li {
width: 160px;
height: 80px;
}

#link_btn li a {
display: block;
width: 100%;
height: 100%;
}

#link_btn li:hover {
transition: 0.1s all;
opacity: 0.5;
}

#link_btn li:nth-child(1) {
background: url(../images/live_btn.png) no-repeat center center;
background-size: 150px;
}

#link_btn li:nth-child(3) {
background: url(../images/replay_btn.png) no-repeat center center;
background-size: 150px;
}

#link_btn li:nth-child(4) {
background: url(../images/vote_btn.png) no-repeat top 12px center;
background-size: 110px;

}

/* ハンバーガーメニュー */

.menu-btn {
position: fixed;
display: flex;
height: 102px;
width: 102px;
/* top: -100px; */
justify-content: center;
align-items: center;
z-index: 101;
cursor: pointer;
background: url(../images/menu.png) no-repeat center center;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 4px;
width: 45px;
position: absolute;
transition: all 0.5s;
background: #26B3FA;

}

.menu-btn span:before {
bottom: 14px;
left: 0px;
}

.menu-btn span:after {
top: 14px;
left: 0px;
}

.menu-content {
width: 100%;
height: 100%;
padding: 30px 0 0;
position: fixed;
top: 0;
left: 0;
z-index: 80;
scrollbar-width: none;
-ms-overflow-style: none;
/* background: url(../images/naka_bg.png) repeat; */
/* background-size: cover; */
}

/* //  [ backdrop-filter ] が効かないブラウザへの対応 */
@supports not (backdrop-filter: blur(24px)) {
#menu01 .menu-content {
background: #000C54;
}
}

.monu-content::-webkit-scrollbar {
display: none !important;
}

.menu-content .nonac img {
opacity: 0.5;
}

.menu-content .nonac {
pointer-events: none !important;
}

.menu-content h1 {
text-align: center;
width: 1020px;
margin: auto;
}


#menu01 .menu-content {
width: 100%;
height: 100%;
position: fixed;
top: calc(-150% - 30px);
/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background-color: rgb(38 179 250);
/* background-color: #144BCC; */
transition: all 0.4s;
/*アニメーション設定*/
opacity: 1;
transform: scale(1);
transform-origin: top;
}

/* //  [ backdrop-filter ] が効かないブラウザへの対応 */
@supports not (backdrop-filter: blur(24px)) {
#menu01 .menu-content {
background: #000C54;
}
}

@media only all and (max-width: 750px) {
/* ハンバーガーメニュー */

#menu01 {
    width: 100px;
    height: 100px;
}

#menu_bt.active span {
background: transparent;
width: 55px;
}

#menu01.active .menu-content {
top: 0;
/*メニューを画面内へ*/
opacity: 1;
transform: scale(1);
overflow-y: auto;
height: 100%;
/* backdrop-filter: blur(20px) contrast(20%); */
}

#menu_bt.active span::before {
bottom: 0;
transition: all 0.5s;
transform: rotate(45deg);
left: 0;
background: #26B3FA;
width: 55px;
}

#menu_bt.active span::after {
top: 0;
transition: all 0.5s;
transform: rotate(-45deg);
left: 0;
background: #26B3FA;
width: 55px;
}

.menu-btn {
position: relative;
display: flex;
height: 102px;
width: 102px;
justify-content: center;
align-items: center;
z-index: 101;
cursor: pointer;
background: url(../images/menu.png) no-repeat center center;
}

.menu-btn {
margin: 0px;

}


.menu-btn span:before {
bottom: 12px;
left: 0px;
}

.menu-btn span:after {
top: 12px;
left: 0px;
}

#menu-btn-check {
display: none;
}

#menu_bt.active span {
background: transparent;
width: 55px;
}

.menu-content {
width: 100%;
height: 100%;
/* padding: 30px 0 0; */
position: fixed;
top: 0;
left: 0;
z-index: 80;
overflow: scroll;

}

.menu-content .nonac img {
opacity: 0.5;
}

.menu-content .nonac {
pointer-events: none !important;
}

.menu-content h1 {
text-align: center;
width: 1020px;
margin: auto;
}

#menu .menu-content {
width: 100%;
height: 100%;
position: fixed;
top: calc(-150% - 30px);
/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background-color: rgb(38 179 250);
transition: all 0.4s;
/*アニメーション設定*/
opacity: 0;
transform: scale(1);
transform-origin: top;
}

#menu.active .menu-content {
top: 0;
/*メニューを画面内へ*/
opacity: 1;
transform: scale(1);
overflow-y: scroll;
height: 100vh;
}

#menu.active .menu-content #menu_box {
width: 100%;
height: 120vh;
display: block;
position: relative;
}

.menu-content {
overflow-x: hidden;
overflow-y: scroll;
}

.menu-content .off {
opacity: 0.5;
pointer-events: none;
}

.menu-content li {
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-style: dotted;
font-weight: bold;
}

.menu-content a {
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-style: dotted;
font-weight: bold;
color: #fff;
}

#menu_race h1 {
position: relative;
display: block;
width: 450px;
height: 93px;
background: url(../images/con_tit_race.svg) no-repeat center center;
background-size: 100%;
margin-bottom: 14px;
left: 36px;
}

#menu_race li {
color: #fff;
font-size: 30px;
font-weight: bold;
height: 72px;
width: 100%;
display: block;
position: relative;
left: 36px;
}

#menu_race {
position: relative;
width: 680px;
right: 0px;
top: 0px;
height: auto;
display: block;
overflow: hidden;
margin-top: 110px !important;
}


#menu_race .spe_con {
position: relative;
width: 292px;
height: 159px;
background: url(../images/la_menu_spe1.ver2_sp.png) no-repeat center top;
display: block;
float: left;
margin-left: 20px;
top: 13px;
left: 36px;
}

#menu_race .spe_con a{
display: block;
position: relative;
width: 100%;
height: 100%;
}

#menu_race .spe_con.spe2 {
background: url(../images/la_menu_spe2.ver2_sp.png) no-repeat center top;
}

/* MENU内|MOVIE */
#menu_movie h1 {
position: relative;
display: block;
width: 260px;
height: 77px;
background: url(../images/con_tit_mov.svg) no-repeat center center;
background-size: 100%;
margin-bottom: 20px;
}

#menu_movie li {
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 1.5em;
height: 66px;
width: 100%;
display: block;
position: relative;
left: 0px;
}

#menu_movie {
position: relative;
overflow: hidden;
width: 680px;
height: auto;
left: 0px;
right: 0;
top: 0px;
padding-bottom: 260px;
margin-top: 40px !important;
}

/* MENU内|キャンペーン */

#menu a.btn {
display: block;
width: 88px;
height: 88px;
position: fixed;
top: 0;
right: 0;
z-index: 99;
pointer-events: none;
}

#menu_campaign h1 {
position: relative;
display: block;
width: 668px;
height: 93px;
background: url(../images/con_tit_mov_cam.svg) no-repeat center center;
background-size: 100%;
margin: 0 0 16px 0;
}

#menu_campaign li {
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 1.5em;
height: 66px;
width: 100%;
display: block;
position: relative;
left: 0px;
}

#menu_campaign {
position: relative;
overflow: hidden;
width: 680px;
height: auto;
left: -7px;
right: 0;
top: 0px;
}

#menu_spe h1 {
position: relative;
display: block;
width: 298px;
height: 76px;
background: url(../images/con_tit_spe.svg) no-repeat center center;
background-size: 100%;
margin: 0 0 16px 0;
}

#menu_spe li {
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 1.5em;
height: 66px;
width: 100%;
display: block;
position: relative;
left: 0px;
}

#menu_spe {
position: relative;
overflow: hidden;
width: 680px;
height: auto;
left: -7px;
right: 0;
top: 0px;
}

/* MENU内SNS */
#menu_sns {
display: block;
width: 750px;
height: 67px;
position: absolute;
top: 85px;
left: 0;
right: 0;
margin: auto;
z-index: 5;
}

#menu_sns ul {
display: flex;
width: 353px;
height: 50px;
position: relative;
margin: auto;
top: 8px;
}

#menu_sns ul span {
position: relative;
width: 2px;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.6) 3px 3px 20px;
background: #fff;
opacity: 0.5;
}

#menu_sns ul li {
position: relative;
width: 25%;
height: 100%;
top: 3px;
transition: 0.4s all;
transform: translateY(0px);
}



#menu_sns ul li a {
position: relative;
width: 100%;
height: 100%;
display: block;
}

#menu_sns ul li.i_fb {
background: url(../images/i_fb.svg) center left 25px no-repeat;
background-size: 43px;
}

#menu_sns ul li.i_twi {
background: url(../images/i_twi.svg) center left 16px no-repeat;
background-size: 62px;

}

#menu_sns ul li.i_you {
background: url(../images/i_you.svg) center left 13.5px no-repeat;
background-size: 62px;

}

#menu_sns ul li.i_line {
background: url(../images/i_line.svg) center left 14px no-repeat;
background-size: 62px;

}

#menu_sns ul li.i_qr {
background: url(../images/i_qr.svg) center left -1px no-repeat;
}


/* MENU内|蒲郡ロゴ */
#menu_logo {
display: block;
width: 750px;
height: 63px;
position: absolute;
top: 16px;
left: 0;
right: 0;
margin: auto;
transition: 0.4s all;
}

#menu_logo a {
width: 100%;
height: 100%;
position: relative;
display: block;
}




/* MENU内|リンク */
#menu_link {
display: block;
width: 565px;
height: 77px;
position: absolute;
top: 160px;
left: 0;
right: 0;
margin: auto;
}

#menu_link ul {
display: flex;
width: 97%;
height: 100%;
margin: auto;
position: relative;
justify-content: space-between;
flex-wrap: nowrap;
}

#menu_link ul li {
width: 173px;
height: 100%;
position: relative;
background: #000;
transition: 0.4s all;
}

#menu_link ul li a {
width: 100%;
height: 100%;
position: relative;
display: block;
}
}


@media only all and (min-width: 751px) {

#menu a.btn {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 99;
}

.menu-content li a:hover {
transition: 0.5s all;
opacity: 0.5;
}
.menu-content li:hover {
transform: translateX(5px);
transition: 0.5s all;
}

#menu_link ul li:hover {
transform: translateX(0px);
}

#menu_link ul li a:hover {
transform: translateX(0px);
}

#menu a.btn {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 99;
}

.menu-content li a:hover {
transition: 0.5s all;
opacity: 0.5;
}
.menu-content li:hover {
transform: translateX(5px);
transition: 0.5s all;
}

#menu_link ul li:hover {
transform: translateX(0px);
}

#menu_link ul li a:hover {
transform: translateX(0px);
}

#menu_bt.active span {
background: transparent;
width: 55px;
}

#menu_bt.active span::before {
bottom: 0;
transition: all 0.5s;
transform: rotate(45deg);
left: 0;
background: #26B3FA;
width: 55px;
}

#menu_bt.active span::after {
top: 0;
transition: all 0.5s;
transform: rotate(-45deg);
left: 0;
background: #26B3FA;
width: 55px;
}

#menu-btn-check {
display: none;
}

/* #menu.active .menu-content {
top: 0;
メニューを画面内へ
opacity: 1;
transform: scale(1);
overflow-y: auto;
height: 100%;
backdrop-filter: blur(20px) contrast(20%);
} */

/* 初期状態：メニュー非表示 */
#menu .menu-content {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1);
  background-color: rgb(38 179 250);
  transition: all 0.4s;
  z-index: 80;
}

/* 表示状態：.activeがついたとき */
#menu.active .menu-content {
  top: 0;
  opacity: 1;
  overflow-y: auto;
  height: 100%;
}

.six-color-stripes_menu {
position: absolute;
top: 0;
left: 80px;
height: 1646px;
width: 2%;
display: flex;
z-index: -1;
}

.six-color-stripes_menu div {
  flex: 1;
  width: 100%;
}

.six-color-stripes_menu div:nth-child(1) { background: #ffffff; } /* 白 */
.six-color-stripes_menu div:nth-child(2) { background: #000000; } /* 黒 */
.six-color-stripes_menu div:nth-child(3) { background: #FF0000; } /* 赤 */
.six-color-stripes_menu div:nth-child(4) { background: #1C8DFF; } /* 青 */
.six-color-stripes_menu div:nth-child(5) { background: #F7FF18; } /* 黄 */
.six-color-stripes_menu div:nth-child(6) { background: #06A200; } /* 緑 */


}