@charset "UTF-8";

/*******************************
共通CSS
********************************/
html {scroll-behavior: smooth;}
body {
  font-family: "Noto Sans JP", serif;
  text-size-adjust: none;
  -webkit-text-size-adjust: none; /* iOSのテキストスケール調整 */
  /*safari用*/
}
#wrapper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: clip;
}
p { font-family: "Noto Sans JP", serif;}
h1 {font-family: sans-serif}
.center {
  text-align: center;
}
a {
  width: 100%;
  height: 100%;
  display: block;
}
ul .no {
  pointer-events: none;
  opacity: 0.3;
}
li {
  list-style: none;
}
.soon {
  pointer-events: none;
}
/* .fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s ease-out forwards;
} */
/* もとから animation を当てない */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
}
/* inview でクラス付与されたら発火 */
.fade-in.is-show {
  animation: fadeIn 0.8s ease-out forwards;
}
/* loading
------------------------------------------------------------*/
#loading {
  position: fixed;
  inset: 0;
  background: #e9fdff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* 表示→一定時間後に非表示 */
  animation: loading-hide 0.8s ease forwards;
  animation-delay: 1s; /* ここで表示しておく時間を調整 */
}
@keyframes loading-hide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
/* loading dot
------------------------------------------------------------*/
.dots {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dots .dot {
  width: 12px; height: 12px;
  margin: 0 5px;
  background-color: #869afe;
  border-radius: 50%;
  animation: dot-pulse 1.5s ease-in-out infinite;
}
.dots .dot:nth-child(1){ animation-delay: 0s; }
.dots .dot:nth-child(2){ animation-delay: 0.2s; }
.dots .dot:nth-child(3){ animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.7; }
  50% { transform: scale(1); opacity: 1; }
}

.top_racer,
.top_wave {
  animation: floatY 6s ease-in-out infinite;
}

/* 上下にふわふわ */
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* 個別設定でタイミングをずらす */
.top_wave {
  animation-duration: 3s;
  animation-delay: 0s;
}

.top_racer {
  animation-duration: 5s;
  animation-delay: 2s;
}
/* anime
------------------------------------------------------------*/
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); } 
  to { opacity: 1; transform: translateY(0); }
}

/*****************************************************************************************************************************************
  「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
  ****************************************************************************************************************************************/
@media all and (min-width: 751px) {

html {
  min-width: 1920px;
  overflow-y: scroll;
  /* 縦スクロールバーを常に表示 */
}
body {
  font-size: 16px;
  line-height: 1.6;
  min-width: 1920px;
  background: #fff;
  margin: 0;
  overflow-x: hidden;
}
#wrapper {
  min-width: 1920px;
}
.pc_non {
  display: none;
}

/* top
------------------------------------------------------------*/
#top_con {
  width: 1920px;
  height: 960px;
  background: url(../images/top_bg_pc.png) no-repeat center / 100%;
}
/* #top_con {
  background-image:
    url(../images/top_bg_pc_top.png),                  
    radial-gradient(#0034ff0d 20%, transparent 27%),  
    url(../images/top_bg_pc.png);                      

  background-size: contain, 20px 20px, cover;          
  background-repeat: no-repeat, repeat, no-repeat;     
  background-position: center, 0 0, center;            

  animation: ani 180s linear infinite;
  }
@keyframes ani {
  0%   { background-position: center, 0 0, center; }
  100% { background-position: center, 200% 200%, center; }
} */

#top_con {
  background-image:
    radial-gradient(#0034ff0d 20%, transparent 27%), /* 動くドット */
    url(../images/top_bg_pc.png);                   /* 固定の背景 */

  background-size: 20px 20px, cover;
  background-repeat: repeat, no-repeat;
  background-position: 0 0, top center; /* ←初期値を2枚分書く */

  animation: ani 180s linear infinite;
}
/* ①を擬似要素で前面に */
#top_con::before{
  content: "";
  position: absolute;
  inset: 0;               /* #top_conと同じ領域 */
  background: url(../images/top_bg_pc_top.png) no-repeat center;
  pointer-events: none;   /* クリックを透過 */
}
@keyframes ani {
  0%   { background-position: 0   0, top center; }
  100% { background-position: 200% 200%, top center; }
}

/* header
------------------------------------------------------------*/
#header {
  width: 1920px;
  height: 40px;
  position: relative;
  display: flex;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
}
/* gama rogo
------------------------------------------------------------*/
#hp_link {
  width: 253px;
  height: 100%;
  background: url(../images/g_logo.svg) no-repeat left;
  transition: transform 0.1s ease-out, opacity 0.3s ease-out;
}
#hp_link:hover { opacity: 0.5; }
#hp_link a {
  display: block;
  width: 100%;
  height: 100%;
}
/* sns button
------------------------------------------------------------*/
#menu_sns {
  border-right: 1px solid #fff;
}
#menu_sns ul {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#menu_sns ul li {
  width: 100%;
  height: 100%;
  border-left: 1px solid #fff;
  transition: transform 0.1s ease-out, opacity 0.3s ease-out;
}
#menu_sns ul li:hover {
  transform: translateY(-5px);
}
#menu_sns ul li a {
  display: block;
  width: 100%;
  height: 100%;
}
#menu_sns ul li img {
  width: 100%;
  height: 100%;
}

/* live button
------------------------------------------------------------*/
#race {
  width: 390px;
  position: absolute;
  right: 51px;
  top: 20px;
  filter: drop-shadow(2px 2px 6px rgba(3, 0, 85, 0.5));
}
#race ul {
  margin: 0;
  padding: 0;
  display: flex;
}
#race li {
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}
#race li:hover {
  opacity: 0.4;
}
.live_btn {
  width: 100%;
  height: 116px;
  background: url(../images/live.svg) no-repeat center;
}
.replay_btn {
  width: 100%;
  height: 116px;
  background: url(../images/replay.svg) no-repeat center;
}
.vote_btn {
  width: 100%;
  height: 116px;
  background: url(../images/vote.svg) no-repeat center;
}

/* tit aqua
------------------------------------------------------------*/
#top_tit {
  width: 827px;
  height: 278px;
  margin: 0;
  position: absolute;
  background: url(../images/tit.svg) no-repeat center;
  background-size: contain;
  bottom: 32px;
  left: 162px;
}
.top_aqua {
  width: 925px;
  height: 1155px;
  background: url(../images/aqua_pc.png) no-repeat center;
  background-size: contain;
  position: absolute;
  right: 151px;
  top: -43px;
}
.top_racer {
  width: 510px;
  height: 222px;
  background: url(../images/racer.png) no-repeat center;
  background-size: contain;
  position: absolute;
  right: -31px;
  top: 205px;
}
.top_wave {
  width: 983px;
  height: 972px;
  background: url(../images/wave_pc.png) no-repeat center;
  background-size: contain;
  position: absolute;
  right: -168px;
  bottom: -261px;
}
.top_konosuba_rogo {
  width: 188px;
  height: 132px;
  background: url(../images/konosuba_rogo.png) no-repeat center;
  background-size: contain;
  position: absolute;
  right: 24px;
  top: 612px;
}
.top_konosuba_copy p {
  font-size: 16px;
  color: #000000;
  background-size: contain;
  position: absolute;
  right: 421px;
  top: 897px;
  font-weight: bold;
  text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

/* menu area
------------------------------------------------------------*/
#menu {
  width: 977px;
  height: 495px;
  position: absolute;
  left: 92px;
  top: 136px;
  margin: 0;
}
#menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
  gap: 25px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.menu li {
  width: 225px;
  height: 225px;
  filter: drop-shadow(2px 8px 6px rgba(3, 0, 85, 0.5));
  transition: transform 0.2s ease-out, opacity 0.3s ease-out;
}
.menu li:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
}
.menu a {
  display: block;
  width: 225px;
  height: 225px;
  background-repeat: no-repeat;
  background-position: center;
}
/* --- 背景画像（全て270x270） --- */
.tenbo  { background: url(../images/tenbo.svg) no-repeat center; }
.syutu  { background: url(../images/syutu.svg) no-repeat center; }
.dream  { background: url(../images/dream.svg) no-repeat center; }
.event  { background: url(../images/event.svg) no-repeat center; }
.gamapo { background: url(../images/gamapo.svg) no-repeat center; }
.movie  { background: url(../images/movies.svg) no-repeat center; }
.column { background: url(../images/column.svg) no-repeat center; }

/* topics
------------------------------------------------------------*/
#topics {
  width: 383px;
  height: 170px;
  margin: 0;
  background: url(../images/topics.png) no-repeat center;
  background-size: contain;
  bottom: 23px;
  right: 21px;
  position: absolute;
}
.topics:hover {
  opacity: 0.6;
}

/* footer
------------------------------------------------------------*/
.footer {
  background: #395BA6;
  padding: 3px 0;
  position: relative;
  z-index: 15;
}
.footer p {
  font-family: "Roboto";
  color: #fff;
  text-align: center;
  line-height: 3px;
  font-size: 13px;
}

}

/*****************************************************************************************************************************************
  「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
  ****************************************************************************************************************************************/
@media only all and (max-width: 750px) {

body {
  font-size: 28px;
  line-height: 1.5;
  background: #000;
  margin: 0;
}
body.noScroll {
  overflow: hidden;
}
#wrapper {
  overflow-x: hidden;
}
p {max-height: 100%;}
.sp_non {
  display: none !important;
}
#wrapper {
  width: 750px;
  margin-top: 0px;
}
.old-ios .ani-img,
.old-ios .fade-in {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  outline: 1px solid transparent;
}
.old-ios .ani-img.recomposite,
.old-ios .fade-in.recomposite {
  -webkit-transform: translateZ(0) rotate(0.0001deg);
          transform: translateZ(0) rotate(0.0001deg);
}
/* 共通：ラッパーをクリップ箱に */
.top_racer,
.top_wave {
  overflow: hidden;                     /* 端のにじみを物理的に隠す */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  background: none !important;          /* 元の背景は切る（疑似要素に移す） */
  position: absolute;                   /* 既存どおり。位置指定はこのままでOK */
}

/* 可視画像は疑似要素へ（上下左右に1pxブリード） */
.top_racer::after,
.top_wave::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;   /* ブリード */
  background-repeat: no-repeat;
  background-position: center;
  /* 元要素サイズより2px大きく描画して端欠けを防ぐ */
  background-size: calc(100% + 2px) calc(100% + 2px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}
  .top_racer::after { background-image: url(../images/racer.png); }
  .top_wave::after  { background-image: url(../images/wave_sp.png); }
  /* 再合成トリガ（目に見えない範囲で描画パス切替） */
.old-ios .recomposite {
  -webkit-transform: translateZ(0) rotate(0.0001deg);
          transform: translateZ(0) rotate(0.0001deg);
  opacity: 0.9999; /* 1と同じ見た目だが描画を切替させやすい */
}

/* すでに入れているクリップ＋ブリードは継続 */
.top_racer, .top_wave { overflow: hidden; background: none !important; }
.top_racer::after, .top_wave::after {
  content: ""; position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px; /* ブリード */
  background-repeat: no-repeat; background-position: center;
  background-size: calc(100% + 2px) calc(100% + 2px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* 旧iOSではさらに isolation を強めて縁を出さない */
.old-ios .top_racer, .old-ios .top_wave { contain: paint; }

/* top
------------------------------------------------------------*/
#top_con {
  min-height: 2448px;
  background: url(../images/top_bg_sp.png) no-repeat top;
  position: relative;
}
#top_con {
  background-image:
    radial-gradient(#0034ff0d 20%, transparent 37%), /* 動くドット */
    url(../images/top_bg_sp.png);                   /* 固定の背景 */

  background-size: 20px 20px, 750px auto;
  background-repeat: repeat, no-repeat;
  background-position: 0 0, top center; /* ←初期値を2枚分書く */

  animation: ani 190s linear infinite;
}
/* ①を擬似要素で前面に */
#top_con::before{
  content: "";
  position: absolute;
  inset: 0;               /* #top_conと同じ領域 */
  background: url(../images/top_bg_sp_top.png) no-repeat 50% 0 / 750px auto;
  pointer-events: none;   /* クリックを透過 */
}
@keyframes ani {
  0%   { background-position: 0   0, top center; }
  100% { background-position: 200% 200%, top center; }
}

/* header
------------------------------------------------------------*/
#header {
  width: 734px;
  height: 85px;
  position: relative;
  display: flex;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
}
/* gama logo
------------------------------------------------------------*/
#hp_link {
  background: url(../images/g_logo.svg) no-repeat center;
  width: 480px;
  height: 60px;
  background-size: contain;
  margin: auto 13px auto 8px;
  filter: drop-shadow(2px 4px 5px #85778D);
}
#hp_link a {
  width: 100%;
  height: 100%;
}
/* sns
------------------------------------------------------------*/
#menu_sns {
  border-right: 1px solid #fff;
}
#menu_sns ul {
  display: flex;
  height: 100%;
  width: 430px;
  padding: 0;
  margin: 0;
}
#menu_sns ul li {
  width: 100%;
  height: 100%;
  border-left: 1px solid #fff;
}
#menu_sns ul li a {
  width: 100%;
  height: 100%;
}
#menu_sns ul li img {
  width: 100%;
  height: 100%;
}
/* live button
------------------------------------------------------------*/
#race {
  width: 750px;
  position: fixed;
  bottom: 0;   
  left: 0;     
  background: #395BA6;
  z-index: 100;
}
#race ul {
  width: 690px;
  height: 166px;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto -80px;  
  padding: 0;
  list-style: none;
  position: relative;
  bottom: 80px;
  filter: drop-shadow(2px 2px 11px rgba(3, 0, 85, 0.5));
}
#race ul li {
  flex: 1;
  background-size: cover;
}
#race ul li a {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.live_btn   { background-image: url(../images/live.svg); }
.replay_btn { background-image: url(../images/replay.svg); }
.vote_btn   { background-image: url(../images/vote.svg); }
.pagetop    { background-image: url(../images/pagetop.svg); }

/* tit aqua
------------------------------------------------------------*/
#top_tit {
  width: 690px;
  height: 240px;
  margin: -90px auto 76px;
  position: relative;
  background: url(../images/tit.svg) no-repeat center;
  background-size: cover;
}
.top_aqua {
  width: 750px;
  height: 807px;
  background: url(../images/aqua_sp.png) no-repeat center;
  background-size: contain;
  margin-top: -90px;
}
.top_racer {
  width: 570px;
  height: 253px;
  background: url(../images/racer.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 960px;
  left: -218px;
}
.top_konosuba_rogo {
  width: 180px;
  height: 125px;
  background: url(../images/konosuba_rogo.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 235px;
  left: 38px;
}
.top_wave {
  width: 406px;
  height: 443px;
  background: url(../images/wave_sp.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 525px;
  left: 458px;
}
.top_konosuba_copy p {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  position: absolute;
  top: 100px;
  margin: 13px;
  padding: 0;
  text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

/* menu area
------------------------------------------------------------*/
#menu {
  width: 700px;
  height: auto;
  left: 0;
  top: auto;
  position: relative;
  padding: 20px 0;
  margin: 0 auto;
}
#menu ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  justify-items: center;
  padding: 0;
  margin: 0;
}
.menu li,
.menu a {
  width: 220px;
  height: 220px;
}
.menu a {
  display: block;
}
#menu li {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* sp menu調整
------------------------------------------------------------*/
/* コラム展望調整(中央へ) */
#menu li.column,
#menu li.tenbo {
  grid-column: span 1;
  margin-left: -237px;
}
#menu li.column { grid-column: 2; }
#menu li.tenbo  { grid-column: 3; }
/* 出場選手ドリームイベント(調整特になし) */
#menu li.syutu,
#menu li.dream,
#menu li.event { grid-column: auto; }
/* ガマポMOVIE調整(中央へ) */
#menu li.gamapo,
#menu li.movie {
  margin-left: -237px;
}
#menu li.gamapo { grid-column: 2; }
#menu li.movie  { grid-column: 3; }
/* ボタン画像 */
#menu li.column { background-image: url(../images/column.svg); }
#menu li.tenbo  { background-image: url(../images/tenbo.svg); }
#menu li.syutu  { background-image: url(../images/syutu.svg); }
#menu li.dream  { background-image: url(../images/dream.svg); }
#menu li.event  { background-image: url(../images/event.svg); }
#menu li.gamapo { background-image: url(../images/gamapo.svg); }
#menu li.movie  { background-image: url(../images/movies.svg); }

/* topics
------------------------------------------------------------*/
#topics {
  width: 690px;
  height: 309px;
  margin: 43px auto;
  background: url(../images/topics.png) no-repeat center;
  background-size: cover;
  position: relative;
}

/* footer
------------------------------------------------------------*/
.footer {
  padding: 25px;
}

.footer p {
  font-family: "Roboto";
  color: #fff;
  margin: 0px auto;
  text-align: center;
}

}