html{
        scroll-behavior: smooth;
        height: 100%;
    }
    *:focus {
      outline: none;
    }
    * {
        margin: 0;
        padding: 0;
      }
    html, body {
        overscroll-behavior-x: none; /* 横方向のバウンスを禁止 */
        overscroll-behavior-y: none; /* 縦方向も禁止したい場合 */
        }
    img
    {
    max-width: 100%;
    }
    ul li
    {
        list-style: none;
    }
    a
    {
        text-decoration: none;
        color: inherit;
    }

    .pc { display: flex; flex-flow: column; }
    .tb { display: none; }
    .sp { display: none; }

    body {
      margin: 0;
      padding: 0;
      height: 100%;
      /* background-color: #FCFAF2;
      background-size: cover;
      background-position: center;
      background-attachment: fixed; */
      color: #ffffff;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: bold;
      font-size: 18px;
      line-height:1.5em;
      width: 100vw;
      max-width: 100vw;
      overflow-x: hidden;
      background-color: #0D0C0C;
    }

    .app {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      max-width: 1920px;
      margin: 0 auto;
      min-height: 100vh;
    }
    .main {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
    }
    .sidebar
    {
      position: sticky;
      top: 0; 
      height: 100vh;
      width: 24%;
      max-width: 460px;
      background: #171616;
      flex-shrink: 0;
      overflow-y: auto;
      color: #E8E8E8;
      /* padding: 20px 15px; */
      padding:15px;
      box-sizing: border-box;
      min-width: 350px;
    }

    .content
    {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      overflow: hidden;
    }
    section
    {
      margin: 50px auto 0;
      width: 90%;
    }
    section:last-of-type
    {
      margin-bottom: 120px;
    }
    .logo-wrap
    {
      display: block;
      position: relative;
      padding-bottom: 5%;
      width: 81%;
      /* max-width: 372px; */
      max-width: 280px;
      margin: 0 auto;
    }
    .logo-wrap::after
    {
      content: "KOCHI eSports Festival";
      width: 100%;
      height: 1.25vw;
      color: #ffffff;
      /* font-size: clamp(10px, 1.25vw, 20px); */
      font-size: 16px;
      line-height: 1;
      vertical-align: bottom;
      position: absolute;
      bottom: -5%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      padding-right: 2em;
      box-sizing: border-box;
      white-space: nowrap;
    }
    .menu
    {
      padding: 25px 5px 10px 5px;
      box-sizing: border-box;
      border-bottom: 1px solid #343434;
    }

    .menu ul li a {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: #E8E8E8;
      padding: 13px 10px;
      border-radius: 5px;
      overflow: hidden;
      transition: color 0.3s;
      box-sizing: border-box;
      /* font-size: 1.1em; */
      font-size: 0.9em;
    }

    .menu ul li a::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        rgba(227, 61, 39, 0.3) 0%,
        rgba(227, 61, 39, 0.05) 100% 
      );
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;

      z-index: 0;
    }
    .menu ul li a:hover::before {
      opacity: 1;
      
    }

    .menu ul li a:hover {
      color: #fff;
    }
    .menu ul li a img {
      transition: opacity 0.2s;
    }

    .menu ul li span
    {
      z-index: 1;
    }


    .menu-icon
    {
      width: 25px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
    }
    .menu-icon>img
    {
      display: inline-block;
      object-fit: contain;
      padding: 0;
      vertical-align: middle;
    }
    /* 通常状態 */
    .menu ul li a img.default {
      display: block;
    }

    /* ホバー時の差し替え用画像（非表示にしておく） */
    .menu ul li a img.hover {
      display: none;
    }

    /* ホバーしたときに入れ替える */
    .menu ul li a:hover img.default {
      display: none;
    }

    .menu ul li a:hover img.hover {
      display: block;
    }
    @media (hover: hover) and (pointer: fine) {
      .menu ul li a:hover img.default {
        display: none;
      }
      .menu ul li a:hover img.hover {
        display: inline;
      }
    }
    .sns {
        display: flex;
        gap: 15px;
        justify-content: flex-start;
        align-items: center;
        padding: 20px 0px;
      }

      .sns>div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 55px;
        border-radius: 8px;
        background-color: #313131;
        transition: background-color 0.3s, transform 0.2s;
      }
      .sns>div a
      {
        display: inline-flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
      }

      .sns>div img {
        width: 28px;
        height: 28px;
      }

      .sns>div:hover {
        filter: brightness(1.2);
        transform: scale(1.05);
      }
      .content-top
      {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .page-title
      {
        width: 100%;
        background-image: url(../img/title-bg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        aspect-ratio: 1095/211;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
      .page-title>h1
      {
        font-family: "oswald", sans-serif;
        font-size: clamp(40px, 5vw, 60px);
        height: fit-content;
        line-height: 1.5;
      }
      .page-title>p
      {
        font-size: 1.2em;
        line-height: 1.5;
      }

      .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        font-size: 0.8em;
        font-weight: 500;
        color: #9F9F9F;
        margin: 15px 10px;
      }
      .breadcrumb li
      {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .breadcrumb li:not(:last-of-type)::after {
        content: "";
        display: inline-flex;
        width: 7px;
        height: 7px;
        border-top: 1px solid #9F9F9F;
        border-right: 1px solid #9F9F9F;
        rotate: 45deg;
        margin: 10px;
      }
      .breadcrumb a
      {
        text-decoration: underline;
      }
      
      footer
      {
          width: 100%;
          background-color: #222222;
          padding: 10px 0;
          color: #ffffff;
          text-align: center;
          margin-top: auto;
      }
      footer>p
      {
        font-size: 14px;
      }

      
      @media screen and (min-width:768px) {
        .breadcrumb a:hover
        {
          opacity: 0.8;
          text-decoration: none;
          transition: all 0.3s;
        }
      } 


      @media screen and (max-width:1024px) {
        .pc{display: none;}
        .tb{ display: flex; flex-flow: column; }

        /* ==== ハンバーガーアイコン ==== */
.menu-trigger {
  position: fixed;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  cursor: pointer;
  z-index: 2000;
  background-color: #0D0D0D;
  border-radius: 0 0 0 5px;
}
.menu-trigger.menu-trigger.active
{
    background-color: #262626;
}
.menu>ul li
{
    margin: 5px 0;
}
.menu-trigger>div
{
    display: inline-flex;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
}
.menu-trigger span,
.menu-trigger span::before,
.menu-trigger span::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  content: "";
  transition: all 0.4s ease;
  transform: translateX(-50%);
}
.menu-trigger span {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.menu-trigger span::before {
  top: -10px;
}
.menu-trigger span::after {
  top: 10px;
}

/* 開いたときのアニメーション */
.menu-trigger.active span {
  background: transparent;
  transform: translateX(-50%) translateY(-50%);
}
.menu-trigger.active span::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}
.menu-trigger.active span::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* ==== サイドバー（全画面拡大演出） ==== */
.sidebar-content {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  clip-path: circle(0 at 100% 0);
  transition: clip-path 0.8s ease-in-out;
  z-index: 999;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  background-color: #0D0D0D;

}
.sidebar-content.active {
  clip-path: circle(150% at 100% 0);
  opacity: 1;
  pointer-events: auto;
}

/* ==== 中身のアニメーション ==== */
.sidebar-content .logo-wrap,
.sidebar-content .menu,
.sidebar-content .sns {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.sidebar-content.active .logo-wrap,
.sidebar-content.active .menu,
.sidebar-content.active .sns {
  opacity: 1;
  transform:  translateY(0);
}

/* ロゴ */
.logo-wrap {
  text-align: center;
  padding: 55px 0 20px;
}
.logo-wrap::after
{
    bottom: 5%;
    font-size: clamp(10px, 5vw, 16px);
}
/* .logo {
  width: 120px;
} 
  */

/* メニュー */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}
.menu li a:hover {
  background: #f5f5f5;
}
.menu-icon {
  width: 25px;
  height: 25px;
  position: relative;
}
.menu-icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.3s;
}
.menu-icon img.hover {
  opacity: 0;
}
.menu li a:hover .menu-icon img.hover {
  opacity: 1;
}
.menu li a:hover .menu-icon img.default {
  opacity: 0;
}

/* SNSリンク */
.sns {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px 0 40px;
}
.sns img {
  width: 30px;
  transition: transform 0.3s ease;
}
.sns img:hover {
  transform: scale(1.1);
}

/* ==== 背景拡大時にスクロール禁止 ==== */
body.menu-open {
  overflow: hidden;
}


.sp .menu
{
  width: 60%;
  margin:  0 auto;
}
      } 






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

  /* active の基本スタイル */
  .menu ul li a.active {
    color: #fff; /* テキスト白 */
  }

  /* active のとき ::before を表示 */
  .menu ul li a.active::before {
    opacity: 1 !important; /* hover と同じ見た目になるよう強制 */
  }

  /* active のときアイコン差し替え */
  .menu ul li a.active img.default {
    display: none !important;
  }
  .menu ul li a.active img.hover {
    display: block !important;
  }

  /* 共通：hover と active を同じ見た目にする */
  .menu ul li a:is(:hover, .active)::before {
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  /* アイコンの差し替えも hover と active で同じに */
  .menu ul li a:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a:is(:hover, .active) img.hover {
    display: block !important;
  }
  

  /* home*/
/* home : #E33D27 (227,61,39) */
.menu ul li a[data-color="home"]:hover::before,
.menu ul li a[data-color="home"].active::before  {
    background: linear-gradient(
      90deg,
      rgba(227, 61, 39, 0.30) 0%,
      rgba(227, 61, 39, 0.05) 100%
    );
    opacity: 1; /* 必要に応じて強制表示 */
  }

  /* （必要なら）アイコン差し替えも home のみ明示的にする場合 */
  .menu ul li a[data-color="home"]:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a[data-color="home"]:is(:hover, .active) img.hover {
    display: block !important;
  }


  /* topics: #EA763F (234,118,63) */
  .menu ul li a[data-color="topics"]:hover::before,
.menu ul li a[data-color="topics"].active::before  {
    background: linear-gradient(
      90deg,
      rgba(234,118,63,0.30) 0%,
      rgba(234,118,63,0.05) 100%
    );
  }

  /* about */
    .menu ul li a[data-color="about"]:hover::before,
.menu ul li a[data-color="about"].active::before {
    background: linear-gradient(
      90deg,
      rgba(240, 201, 91, 0.30) 0%,
      rgba(240, 201, 91, 0.05) 100%
    );
    opacity: 1; /* 必要に応じて強制表示 */
  }

  /* sf6 : #94E067 (148,224,103) */
  .menu ul li a[data-color="sf6"]:is(:hover, .active)::before {
    background: linear-gradient(
      90deg,
      rgba(148, 224, 103, 0.30) 0%,
      rgba(148, 224, 103, 0.05) 100%
    );
    opacity: 1;
  }

  /* 必要ならアイコン差し替えも同時に強制表示 */
  .menu ul li a[data-color="sf6"]:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a[data-color="sf6"]:is(:hover, .active) img.hover {
    display: block !important;
  }


  /* guest : #49A99F (73,169,159) */
  .menu ul li a[data-color="guest"]:is(:hover, .active)::before {
    background: linear-gradient(
      90deg,
      rgba(73, 169, 159, 0.30) 0%,
      rgba(73, 169, 159, 0.05) 100%
    );
    opacity: 1;
  }

  /* guest の hover / active でアイコンを差し替える（必要なら） */
  .menu ul li a[data-color="guest"]:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a[data-color="guest"]:is(:hover, .active) img.hover {
    display: block !important;
  }

  /* trial : #4E77DE (78,119,222) */
  .menu ul li a[data-color="trial"]:is(:hover, .active)::before {
    background: linear-gradient(
      90deg,
      rgba(78, 119, 222, 0.30) 0%,
      rgba(78, 119, 222, 0.05) 100%
    );
    opacity: 1;
  }

  /* trial の hover / active でアイコン切替を確実にする (必要なら) */
  .menu ul li a[data-color="trial"]:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a[data-color="trial"]:is(:hover, .active) img.hover {
    display: block !important;
  }


  /* live : #31A4E0 (49,164,224) */
  .menu ul li a[data-color="live"]:is(:hover, .active)::before {
    background: linear-gradient(
      90deg,
      rgba(49, 164, 224, 0.30) 0%,
      rgba(49, 164, 224, 0.05) 100%
    );
    opacity: 1;
  }

  /* live の hover / active でアイコン差し替えを確実にする */
  .menu ul li a[data-color="live"]:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a[data-color="live"]:is(:hover, .active) img.hover {
    display: block !important;
  }


  /* movie : #DD3F33 (221,63,51) */
  .menu ul li a[data-color="movie"]:is(:hover, .active)::before {
    background: linear-gradient(
      90deg,
      rgba(221, 63, 51, 0.30) 0%,
      rgba(221, 63, 51, 0.05) 100%
    );
    opacity: 1;
  }

  /* movie の hover / active でアイコン切替を確実に */
  .menu ul li a[data-color="movie"]:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a[data-color="movie"]:is(:hover, .active) img.hover {
    display: block !important;
  }

  /* contact : #E8E8E8 (232,232,232) */
  .menu ul li a[data-color="contact"]:is(:hover, .active)::before {
    background: linear-gradient(
      90deg,
      rgba(232, 232, 232, 0.30) 0%,
      rgba(232, 232, 232, 0.05) 100%
    );
    opacity: 1;
  }

  /* contact の hover / active でアイコン差し替えを確実にする */
  .menu ul li a[data-color="contact"]:is(:hover, .active) img.default {
    display: none !important;
  }
  .menu ul li a[data-color="contact"]:is(:hover, .active) img.hover {
    display: block !important;
  }

}
/* ===== スマホ・タブレット共通：active時の背景グラデーションを適用 ===== */
@media screen and (max-width: 1024px) {
  .menu ul li a.active::before {
    opacity: 1;
  }

  /* 各メニューごとの色設定 */
  .menu ul li a.active[data-color="home"]::before {
    background: linear-gradient(90deg, rgba(227,61,39,0.3) 0%, rgba(227,61,39,0.05) 100%);
  }
  .menu ul li a.active[data-color="topics"]::before {
    background: linear-gradient(90deg, rgba(234,118,63,0.3) 0%, rgba(234,118,63,0.05) 100%);
  }
  .menu ul li a.active[data-color="about"]::before {
    background: linear-gradient(90deg, rgba(240,201,91,0.3) 0%, rgba(240,201,91,0.05) 100%);
  }
  .menu ul li a.active[data-color="sf6"]::before {
    background: linear-gradient(90deg, rgba(148,224,103,0.3) 0%, rgba(148,224,103,0.05) 100%);
  }
  .menu ul li a.active[data-color="guest"]::before {
    background: linear-gradient(90deg, rgba(73,169,159,0.3) 0%, rgba(73,169,159,0.05) 100%);
  }
  .menu ul li a.active[data-color="trial"]::before {
    background: linear-gradient(90deg, rgba(78,119,222,0.3) 0%, rgba(78,119,222,0.05) 100%);
  }
  .menu ul li a.active[data-color="live"]::before {
    background: linear-gradient(90deg, rgba(49,164,224,0.3) 0%, rgba(49,164,224,0.05) 100%);
  }
  .menu ul li a.active[data-color="movie"]::before {
    background: linear-gradient(90deg, rgba(221,63,51,0.3) 0%, rgba(221,63,51,0.05) 100%);
  }
  .menu ul li a.active[data-color="contact"]::before {
    background: linear-gradient(90deg, rgba(232,232,232,0.3) 0%, rgba(232,232,232,0.05) 100%);
  }
  /* active時にhoverアイコンを表示し、defaultを隠す */
  .menu ul li a.active .menu-icon img.hover {
    opacity: 1 !important;
    display: block !important;
  }
  .menu ul li a.active .menu-icon img.default {
    opacity: 0 !important;
    
  }

  .menu ul li a:hover
  {
    background: none;
  }

}










@media all and (max-width:768px)
{
  /* home : #E33D27 (227,61,39) */
.menu ul li a[data-color="home"]:hover::before  {
    background: linear-gradient(
      90deg,
      rgba(227, 61, 39, 0.30) 0%,
      rgba(227, 61, 39, 0.05) 100%
    );
    opacity: 1; /* 必要に応じて強制表示 */
  }

  /* topics: #EA763F (234,118,63) */
  .menu ul li a[data-color="topics"]:hover::before {
    background: linear-gradient(
      90deg,
      rgba(234,118,63,0.30) 0%,
      rgba(234,118,63,0.05) 100%
    );
  }
  /* about */
    .menu ul li a[data-color="about"]:hover::before{
    background: linear-gradient(
      90deg,
      rgba(240, 201, 91, 0.30) 0%,
      rgba(240, 201, 91, 0.05) 100%
    );
    opacity: 1; /* 必要に応じて強制表示 */
  }

  /* sf6 : #94E067 (148,224,103) */
  .menu ul li a[data-color="sf6"]:hover::before {
    background: linear-gradient(
      90deg,
      rgba(148, 224, 103, 0.30) 0%,
      rgba(148, 224, 103, 0.05) 100%
    );
    opacity: 1;
  }


  /* guest : #49A99F (73,169,159) */
  .menu ul li a[data-color="guest"]:hover::before {
    background: linear-gradient(
      90deg,
      rgba(73, 169, 159, 0.30) 0%,
      rgba(73, 169, 159, 0.05) 100%
    );
    opacity: 1;
  }

  /* trial : #4E77DE (78,119,222) */
  .menu ul li a[data-color="trial"]:hover::before {
    background: linear-gradient(
      90deg,
      rgba(78, 119, 222, 0.30) 0%,
      rgba(78, 119, 222, 0.05) 100%
    );
    opacity: 1;
  }

  /* live : #31A4E0 (49,164,224) */
  .menu ul li a[data-color="live"]:hover::before {
    background: linear-gradient(
      90deg,
      rgba(49, 164, 224, 0.30) 0%,
      rgba(49, 164, 224, 0.05) 100%
    );
    opacity: 1;
  }


  /* movie : #DD3F33 (221,63,51) */
  .menu ul li a[data-color="movie"]:hover::before {
    background: linear-gradient(
      90deg,
      rgba(221, 63, 51, 0.30) 0%,
      rgba(221, 63, 51, 0.05) 100%
    );
    opacity: 1;
  }

  /* contact : #E8E8E8 (232,232,232) */
  .menu ul li a[data-color="contact"]:hover::before {
    background: linear-gradient(
      90deg,
      rgba(232, 232, 232, 0.30) 0%,
      rgba(232, 232, 232, 0.05) 100%
    );
    opacity: 1;
  }
  
}