@charset "UTF-8";
h1.logo { max-width: 220px; z-index: 1; position: relative; top: 15px; left: 4%; }
.mainv-section { background: #000; }

/* BOATBoy下層は左固定ビジュアルを通常背景で固定 */
.cm-visual__overlay { background-image: url("../../images/pc_bg.jpg"); }
.cm-visual__overlay::before { display: none; }
.cm-visual__overlay.is-medium-bg { background-image: url("../../images/pc_bg_medium.jpg"); }
.cm-visual__overlay.is-small-bg { background-image: url("../../images/pc_bg_small.jpg"); }

.mainv-bottom { background: #3700a9; padding: 0 5% 15px; }
.mainv-bottom .page_links { display: flex; justify-content: center; gap: 12px; max-width: 1000px; margin: 0 auto; transform: translateY(-50px); }
.mainv-bottom .page_links li { width: 100%; }
.mainv-bottom .page_links li a { height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 6px 6px 0 0; font-size: 1.125rem; font-weight: 700; text-align: center; color: #fff; background: #8e84db; }
.mainv-bottom .page_links li:not(.active) a:hover { background: #a39ae6; }
.mainv-bottom .page_links li.active a { background: #000; pointer-events: none; }
/* .mainv-bottom .race_ttl { text-align: center; color: #fff; max-width: 900px; margin: 0 auto; } */
.mainv-bottom .race_ttl h2 { line-height: 1.35; font-size: 1.313rem; margin-bottom: 10px; }
.mainv-bottom .race_ttl .date { font-weight: 700; font-size: 0.938rem; text-align: center; }

#mainv-section-container { background: #3700a9; }
#mainv-section-container .comingsoon { width: 80%; margin: 0 auto; padding-bottom: 50px; }

/* 注目モーター（Featured motor slider）— bb_arrow.svg を矢印に使用（PNGの場合は同パスに bb_arrow.png を置き、下記 url を差し替え可） */
.motor-feature { padding: 0 0 30px; }
.motor-feature__inner { width: 100%; max-width: 600px; margin: 0 auto; }
.motor-feature__panel-wrap { position: relative; }
.motor-feature__stack { position: relative; }
.motor-feature__hero { max-width: min(100%, 375px); margin: 0 auto; }
.motor-feature__slider .motor-feature__slide { outline: none; }
.motor-feature__panel { background: #000; width: 75%; margin: 0 auto; padding: 35px 40px; }
.motor-feature__heading { color: #aaa5e1; font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 16px; }
.motor-feature__stats { background: #aaa5e1; border-radius: 15px; padding: 20px; width: 85%; margin: 0 auto 30px; color: #000; }
.motor-feature__attention { text-align: center; font-weight: 700; font-size: 1.25rem; margin: 0 0 8px; line-height: 1; color: #000; }
.motor-feature__attention-stars { color: #f0e100; margin-left: 3px; }
.motor-feature__num { text-align: center; font-weight: 900; font-size:3.75rem; margin: 0 0 5px; line-height: 1; }
.motor-feature__num-unit { font-size: 3.125rem; margin-left: 0.08em; }
.motor-feature__rate { font-size:2.188rem; font-weight: 900; text-align: center; line-height: 1; margin-bottom: 10px; }
.motor-feature__note { font-size: 0.813rem; text-align: center; }
.motor-feature__racer { color: #fff; font-weight: 700; font-size: 1.25rem; margin: 0 0 10px; text-align: center; }
.motor-feature__body { color: #fff; font-size: 1rem; line-height: 1.65; }
.motor-feature__arrows-host { position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: auto; pointer-events: none; z-index: 2; }
.motor-feature__arrow { position: absolute; top: 50%; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; transform: translateY(-50%); background:url("../images/bb_arrow.png") center / 48px 48px no-repeat; text-indent: -9999px; overflow: hidden; }
.motor-feature__arrow--prev { left: 40px; }
.motor-feature__arrow--next { right: 40px; transform: translateY(-50%) scaleX(-1); }
.motor-feature__dots-host { margin-top: 4px; padding: 0 12px 20px; }
.motor-feature__dots-host .slick-dots { position: static; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.motor-feature__dots-host .slick-dots li { width: 9px; height: 9px; margin: 0; }
.motor-feature__dots-host .slick-dots li button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #a29ae8; font-size: 0; line-height: 0; cursor: pointer; }
.motor-feature__dots-host .slick-dots li.slick-active button { background: #fff; }
.motor-feature__dots-host .slick-dots li button:before { display: none; content: none; }

.motor-feature__comingsoon { width: 75%; margin: 0 auto; }
.motor-feature__comingsoon .motor-feature__heading { margin-bottom: 16px; }
.motor-feature__comingsoon img { width: 100%; height: auto; display: block; }

/* 注目レーサー（パネルのみスライド・構成は注目モーターと同様） */
.racer-feature { padding: 0 0 30px; }
.racer-feature__inner { width: 100%; max-width: 600px; margin: 0 auto; }
.racer-feature__panel-wrap { position: relative; }
.racer-feature__stack { position: relative; }
.racer-feature__hero { max-width: min(100%, 375px); margin: 0 auto; }
.racer-feature__slider .racer-feature__slide { outline: none; }
.racer-feature__panel { background: #000; width: 75%; margin: 0 auto; padding: 35px 40px; box-sizing: border-box; }
.racer-feature__heading { color: #aaa5e1; font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 20px; }
.racer-feature__photo { text-align: center; margin: 0 0 18px; }
.racer-feature__photo img { display: block; max-width: min(100%, 120px); height: auto; margin: 0 auto; border-radius: 12px; }
.racer-feature__name { color: #fff; font-weight: 700; font-size: 1.25rem; text-align: center; margin: 0 0 15px; line-height: 1.35; }
.racer-feature__num { margin-right: 0.35em; }
.racer-feature__body { color: #fff; font-size: 1rem; line-height: 1.65; margin: 0; }
.racer-feature__arrows-host { position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: auto; pointer-events: none; z-index: 2; }
.racer-feature__arrow { position: absolute; top: 50%; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; transform: translateY(-50%); background:url("../images/bb_arrow.png") center / 48px 48px no-repeat; text-indent: -9999px; overflow: hidden; }
.racer-feature__arrow--prev { left: 40px; }
.racer-feature__arrow--next { right: 40px; transform: translateY(-50%) scaleX(-1); }
.racer-feature__dots-host { margin-top: 4px; padding: 0 12px 20px; }
.racer-feature__dots-host .slick-dots { position: static; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.racer-feature__dots-host .slick-dots li { width: 9px; height: 9px; margin: 0; }
.racer-feature__dots-host .slick-dots li button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #a29ae8; font-size: 0; line-height: 0; cursor: pointer; }
.racer-feature__dots-host .slick-dots li.slick-active button { background: #fff; }
.racer-feature__dots-host .slick-dots li button:before { display: none; content: none; }

.racer-feature__comingsoon { width: 75%; margin: 0 auto; }
.racer-feature__comingsoon .racer-feature__heading { margin-bottom: 16px; }
.racer-feature__comingsoon img { width: 100%; height: auto; display: block; }

.comingsoon { max-width: 900px; width: 80%; margin: 0 auto; }

#Racer { position: relative; background: url("../images/racer_bg.png") no-repeat; background-size: cover; z-index: 0; }
#Racer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2e3189; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
#Racer [data-size="w1000"] { position: relative; z-index: 2;}
#Racer .picup_racer { max-width: 900px; width:80%; margin: 0 auto; }
#Racer .slider_wrapper { position: relative; overflow: visible; }
#Racer .slide-arrow { max-width: 43px; position: absolute; top: 50%; transform: translateY(-50%);z-index: 10; cursor: pointer; transition: .5s; background: #fff; }
#Racer .slide-arrow:hover { opacity: 0.4; }
#Racer .prev-arrow { left: 5px; top: 10px; }
#Racer .slider_wrapper { position: relative; max-width: 1400px; width: 100%; margin: 0 auto; }
#Racer .slick-dots { display: flex; justify-content: center; margin-top: 20px; }
#Racer .slick-dots .slick-active { background:#5068D6; }
#Racer .slick-dots li { background: #A2AEE8; width: 9px; height: 9px; border-radius: 50px; }
#Racer .slick-dots li:not(:last-child) { margin-right: 10px; }
#Racer .slick-dots button { visibility: hidden; }
#Racer .slick-slide { transition: all ease-in-out .3s; }
#Racer .slick-track { display: flex!important; align-items: center!important; }
#Racer .prev-arrow , #Racer .next-arrow { display: block; width: 16px; aspect-ratio: 16 / 50; background: url("../images/arrow_slide.png") no-repeat center center; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; }
#Racer .prev-arrow { left: -4%; }
#Racer .next-arrow { right: -4%; transform: translateY(-50%) scaleX(-1); }
#Racer .racer_box { position: relative; background: #fff; padding: 50px; box-sizing: border-box; max-width: 900px; width: 100%; min-height: 270px; display: flex; align-items: center; justify-content: center; }
#Racer .racer_box::before { content: ''; position: absolute; display: block; width: 100%; height: 8px; background: #B1903E;
background: linear-gradient(90deg, rgba(177, 144, 62, 1) 0%, rgba(233, 217, 144, 1) 50%, rgba(177, 144, 62, 1) 100%); top: 0; left: 0; }
#Racer .racer_box span.num { font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem); margin-right: 10px; }
#Racer .link_wrap { display: flex; justify-content: space-between; align-items: center; }
#Racer .racer_box h2 { margin-top: 0; }
#Racer .racer_box .detail { font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); }
#Racer .racer_box .racer { color: var(--txt-navy); font-size: clamp(0.75rem, 0.719rem + 0.16vw, 0.875rem); line-height: 1.4; text-align: center; width: 116px; margin-right: 25px; }
#Racer .racer_box .racer img { width: min(280px , 100%); }
#Racer .racer_box .name { margin-bottom: 10px; font-weight: 700; font-size: clamp(1.125rem, 1.016rem + 0.55vw, 1.563rem); }
#Racer .racer_box .txt_wrap { width: calc(100% - 116px); color: var(--txt-navy); }

#Suimen { background: #000; padding: 50px 0; }
#Suimen .suimen-card { background: #000; width: 75%; }
#Suimen h2 { color: #aaa5e1; font-size: 1.5rem; text-align: center; margin-bottom: 20px; }
#Suimen .suimen-visual { margin-bottom: 20px; }
#Suimen .suimen-visual img { width: 100%; border-radius: 16px; display: block; }
#Suimen .suimen-ttl { font-size: 1.25rem; text-align: center; font-weight: 700; margin-bottom: 15px; }
#Suimen .suimen-subttl { font-size: 1.125rem; line-height: 1.3; font-weight: 700; padding: 3px 11px; margin-bottom: 7px; border-left: 5px solid #aaa5e1; }
#Suimen .suimen-txt { font-size: 1rem; line-height: 1.75; margin-bottom: 50px; }
#Suimen .suimen-line { border: 0; border-top: 1px solid #999999; margin: 0 0 50px; }
#Suimen .suimen-graph img { width: 100%; max-width: 408px; margin: 0 auto; display: block; }
#Suimen .suimen-note { font-size: 0.75rem; text-align: center; margin-top: 15px; }

/* ミッドナイトリプレイ */
.replay-block { background: #8780d4; padding: 50px 0; overflow: hidden; }
.replay-block__inner { max-width: 640px; padding: 0 12%; margin: 0 auto; }
.replay-block__wrap { position: relative; margin: 0 auto; }
.replay_char { margin: 0 auto 20px; max-width: 190px; }
.replay-block__panel { position: relative; z-index: 1; background: #000; padding: 30px; height: 700px; /*overflow: scroll;*/ }
.replay-block__logo-main {  text-align: center; font-size: 2.063rem; font-weight: 900; line-height: 1; color: #8780d4; margin: 0 0 10px; letter-spacing: 0.05em; }
.replay-block__ttl { color: #fff; font-size: 1.375rem; font-weight: 700; margin: 0 0 25px; }
.replay-block__body { color: #fff; font-size: 1rem; line-height: 1.75; }

#Playback { background: #172a88; position: relative; }
#Playback [data-size="w900"] { width: calc(92% - 140px); }
#Playback::before { content: ""; position: absolute; top: 0; left: 0; width: 70px; height: 100%; background: url("../images/playback_bg.svg") repeat-y; background-size: contain; z-index: 1 ; }
#Playback::after { content: ""; position: absolute; top: 0; right: 0; width: 70px; height: 100%; background: url("../images/playback_bg.svg") repeat-y; background-size: contain; z-index: 1 ; }
#Playback .playback_head { margin: 0 auto clamp(10px , 4vw , 30px); background: linear-gradient(90deg, #b5943e 0%, #eddd94 50%, #b5943e 100%); color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent;}
#Playback .playback_head p { text-align: center; }
#Playback .playback_head .h2_sub { font-size: clamp(1.063rem, 0.938rem + 0.63vw, 1.563rem); font-weight: 700; margin-bottom: 10px; }
#Playback .playback_head h2 { font-family: "Montserrat", sans-serif; text-align: center; font-size: clamp(1.75rem, 1.563rem + 0.94vw, 2.5rem); font-weight: 900; margin-bottom: 0;}
#Playback .playback_head .area_name { font-size: clamp(1.375rem, 1.281rem + 0.47vw, 1.75rem); font-weight: 900; }
#Playback .playback_txt { font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem); line-height: 1.7; font-weight: 700; }
#Playback .playback_wrap { display: flex; align-items: center; gap: 15px;}
#Playback .playback_wrap .playback_box { width: calc(100% - 240px); }
#Playback .playback_wrap .playback_img { max-width: 240px; width: 100%; }
#Playback span.gold { color: #e0cc80; font-weight: 700; }

/* ページ下部リンク（下関/大村/TOP） */
.bb-page-links { background: #fff; padding: 50px 0; }
.bb-page-links__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 30px; align-items: center; }
.bb-page-links__row { width: 100%; display: flex; justify-content: center; gap: 25px; }
.bb-page-links__row a.grade_linkbtn { width: clamp(250px, 34vw, 380px); }
.bb-page-links__row--top a.grade_linkbtn { width: clamp(420px, 70vw, 820px); }
.bb-page-links a { justify-content: center; height: 70px; display: flex; align-items: center; box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .8); }

@media screen and (max-width:600px){
  .bb-page-links__inner { padding: 0 14px; gap: 18px; }
  .bb-page-links__row { gap: 18px; }
  .bb-page-links__row--top a.grade_linkbtn { width: 100%; }
}

@media screen and (max-width:1200px){
}

/*iPad*/
@media screen and (max-width: 1033px) and (max-height: 800px) {
  
}
@media screen and (max-width:1200px){
}

@media screen and (max-width:800px){
  #Playback .playback_wrap { flex-direction: column; gap: 10px; }
  #Playback .playback_wrap .playback_box { width: 100%; }
  #Playback .playback_wrap .playback_img { width: 50%; margin: 0 auto; }
}

@media screen and (max-width:600px){
  h1.logo { max-width: 150px; }
  .bb-page-links a { height: 60px; }
  .mainv-bottom .page_links { gap: 8px; transform: translateY(-40px); }
  .mainv-bottom .page_links li a { height: 40px; }
  .mainv-bottom .race_ttl h2 { margin-bottom: 4px; }
  .motor-feature__panel { width: 85%; padding: 35px 30px; }
  .motor-feature__arrow , .racer-feature__arrow { background: url(../images/bb_arrow.png) center / 30px 30px no-repeat; width: 30px; height: 30px; }
  .motor-feature__arrow--prev , .racer-feature__arrow--prev { left: 15px; }
  .motor-feature__arrow--next , .racer-feature__arrow--next { right: 15px; }
  .motor-feature__stats { width: 100%; }
  .motor-feature__racer { font-size: 1.063rem; margin: 0 0 10px; }
  .motor-feature__body { font-size: 0.875rem; line-height: 1.6; }
  .racer-feature__panel { width: 85%; padding: 35px 30px; }
  .replay-block__body { font-size: 0.875rem; line-height: 1.6; }
  .replay-block__logo-main { font-size: 1.75rem; }
  .replay-block__ttl { font-size: 1.125rem; margin-bottom: 20px; }
  .replay_char { margin-bottom: 15px; }
  .racer-feature__name { font-size: 1.063rem; margin: 0 0 10px; }
  .racer-feature__body { font-size: 0.875rem; line-height: 1.6; }
  .replay-block { padding: 40px 0; }
  .replay-block__panel { height: 560px; }
  .replay-block__inner { padding: 0 5%; }
  .motor-feature__hero , .racer-feature__hero { max-width: min(80%, 375px); }
  #Racer { position: relative; background: url("../images/racer_bg_sp.png") no-repeat; background-size: cover; background-position: right; }
  #Racer .icon { width: 40px; height: 40px; }
  #Racer .racer_box { padding: 40px 20px 30px; display: block; align-items: initial;}
  #Racer .racer_box .racer { margin: 0 auto; }
  #Racer .racer_box .racer img { width: 100%; margin-bottom: 20px; }
  #Racer .racer_box .name { margin-bottom: 10px; }
  #Racer .racer_box .txt_wrap { width: 100%; }
  #Racer .prev-arrow { left: -10%; }
  #Racer .next-arrow { right: -10%; }
  #Racer .slick-dots { margin-top: 10px; }
  #Suimen .suimen-card { width: 85%; }
  #Suimen h2 { margin-bottom: 14px; }
  #Suimen .suimen-txt { margin-bottom: 25px; font-size: 0.875rem; line-height: 1.6; }
  #Suimen .suimen-line { margin-bottom: 25px; }
  #Suimen .suimen-note { font-size: 0.75rem; }
  #Suimen .suimen-subttl { font-size: 1rem; }
  #Playback::before , #Playback::after { width: 30px; }
  #Playback [data-size="w900"] { width: calc(90% - 60px); }
  #Playback .playback_txt { line-height: 1.6;}
}

@media screen and (max-width:375px) {
}

@media screen and (max-width:353px) {
}

@media screen and (max-width:320px){
}