*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    nav,
    li,
    section,
    span,
    dd,
    dt {
      margin: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      list-style: none;
    }

    nav,
    section {
      display: block;
    }

    html {
      font: 700 16px/1 "Titillium Web", sans-serif;
    }

    body {
      margin: 40px 0;
      color: #fff;
      background-color: #000;
    }

    .wrapper {
      width: 72%;
      margin: 0 auto;
      font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif;
      font-size: 16px;
      line-height: 1.5;
      font-weight: 300;
    }

    p.gradation {
      text-align: justify;
    }

    .gradation {
      background: -webkit-linear-gradient(#03fe9f, #9fff1d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: left;
    }

    #app {
      width: 640px;
      margin: 0 auto;
    }

    #app2 {
      width: 640px;
      margin: 0 auto;
    }

    #app3 {
      width: 640px;
      margin: 0 auto;
    }

    #app4 {
      width: 640px;
      margin: 0 auto;
    }


    .cards {
      position: relative;
      height: 85px;
    }

    .card-wrapper {
      position: absolute;
      bottom: 0;
      width: 9%;
      transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .card-wrapper:nth-child(1) {
      height: 40px;
    }

    .card-wrapper:nth-child(2) {
      height: 45px;
    }

    .card-wrapper:nth-child(3) {
      height: 50px;
    }

    .card-wrapper:nth-child(4) {
      height: 55px;
    }

    .card-wrapper:nth-child(5) {
      height: 60px;
    }

    .card-wrapper:nth-child(6) {
      height: 65px;
    }

    .card-wrapper:nth-child(7) {
      height: 70px;
    }

    .card-wrapper:nth-child(8) {
      height: 75px;
    }

    .card-wrapper:nth-child(9) {
      height: 80px;
    }

    .card-wrapper:nth-child(10) {
      height: 85px;
    }

    .card-wrapper:nth-child(11) {
      height: 90px;
    }

    .card-wrapper:nth-child(12) {
      height: 95px;
    }

    .card-wrapper:nth-child(13) {
      height: 100px;
    }

    .card-wrapper:nth-child(14) {
      height: 105px;
    }

    .card-wrapper:nth-child(15) {
      height: 110px;
    }

    .card-wrapper:nth-child(16) {
      height: 115px;
    }

    .card-wrapper[data-sort-index="0"] {
      transform: translateX(0%);
    }

    .card-wrapper[data-sort-index="1"] {
      transform: translateX(100%);
    }

    .card-wrapper[data-sort-index="2"] {
      transform: translateX(200%);
    }

    .card-wrapper[data-sort-index="3"] {
      transform: translateX(300%);
    }

    .card-wrapper[data-sort-index="4"] {
      transform: translateX(400%);
    }

    .card-wrapper[data-sort-index="5"] {
      transform: translateX(500%);
    }

    .card-wrapper[data-sort-index="6"] {
      transform: translateX(600%);
    }

    .card-wrapper[data-sort-index="7"] {
      transform: translateX(700%);
    }

    .card-wrapper[data-sort-index="8"] {
      transform: translateX(800%);
    }

    .card-wrapper[data-sort-index="9"] {
      transform: translateX(900%);
    }

    .card-wrapper[data-sort-index="10"] {
      transform: translateX(1000%);
    }

    .card-wrapper[data-sort-index="11"] {
      transform: translateX(1100%);
    }

    .card-wrapper[data-sort-index="12"] {
      transform: translateX(1200%);
    }

    .card-wrapper[data-sort-index="13"] {
      transform: translateX(1300%);
    }

    .card-wrapper[data-sort-index="14"] {
      transform: translateX(1400%);
    }

    .card-wrapper[data-sort-index="15"] {
      transform: translateX(1500%);
    }

    .card {
      position: relative;
      height: 100%;
      margin: 0 5px;
      border: 1px solid #ff3179;
      background-color: #000;
      box-shadow: 0 0 25px #c2255c;
    }

    .card-active {
      filter: hue-rotate(200deg);
    }

    .card-locked {
      filter: hue-rotate(50deg);
    }

    .label {
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 1.25rem;
      font-family: "Titillium Web", sans-serif;
      font-weight: 700;
      color: #ff3179;
      text-transform: uppercase;
    }

    .value {
      position: absolute;
      top: 10px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 1.25rem;
      font-family: "Titillium Web", sans-serif;
      font-weight: 700;
      color: #333;
      display: none;
    }

    .control-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 30px 5px 0;
      padding-top: 20px;
      border-top: 1px solid #fff;
    }

    h1 {
      margin: 0;
      font-size: 2.5rem;
    }

    button {
      -webkit-appearance: none;
      appearance: none;
      background: none;
      border: none;
      color: #ff3179;
      font-size: 1.5rem;
      cursor: pointer;
    }

    a {
      color: #eb6650;
      text-decoration: none;
    }

    a:visited {
      color: #eb6650;
      text-decoration: none;
    }

    a:hover {
      color: #eb6650;
    }

    .wrap {
      margin: 0 auto;
    }

    .btn a {
      width: 340px;
      height: 70px;
      margin: 60px auto 0 auto;
      background: rgba(85, 85, 85, 0.9);
      ;
      color: #fff;
      font-size: 22px;
      line-height: 70px;
      text-align: center;
      border-radius: 35px;
      display: block;
    }

    .btn a:hover {
      background: linear-gradient(to right,
          rgba(0, 255, 221, 0.9) 0%,
          rgba(75, 132, 255, 0.9) 50%,
          rgba(155, 93, 230, 0.9) 100%);
    }

    footer {
      width: 100%;
      padding: 40px 0;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background-size: cover;
    }

    footer .btn a {
      margin: 0 auto 40px auto;
      color: #fff !important;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: #fff;
    }

    footer .logo {
      width: 100px;
      margin: 30px 0;
    }

    footer .note {
      color: #b4b4b4;
      margin-bottom: 10px;
    }

    footer p {
      background: rgba(0, 0, 0, 0.5);
    }

    /* h1 **/

    h1 {
      margin-bottom: 60px;
      color: #eb6650;
      /*緑系の色 #64B6AC*/
      font-size: 32px;
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-align: center;
    }

    p {
      line-height: 1.5;
    }

    /* nav **/
    nav {
      width: 100%;
      height: 64px;
      /*  background: rgba(255, 255, 255, 0.95); */
      background: rgba(235, 233, 231, 0.95);
      font-size: 24px;
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      line-height: 64px;
      letter-spacing: 0.1em;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
    }

    nav ul {
      display: flex;
      justify-content: space-around;
      margin: 0;
    }

    /* nav **/

    article {
      width: 100%;
      padding: 40px 0;
      /*  background: rgba(255, 255, 255, 0.85); */
      background: rgba(235, 233, 231, 0.85);
      color: rgb(25, 25, 25);
      margin-top: 400px;
    }

    article+article {
      margin-top: 60px;
    }

    .wrap {
      width: 940px;
      margin: 0 auto;
      opacity: 1;
      transition: .8s;
    }

    .news {
      font-size: 14px;
      line-height: 1.3;
    }

    .access ul li {
      font-size: 14px;
      line-height: 1.7;
    }

    .access ul li:nth-child(1) {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .news dl {
      display: table;
    }

    .news dl+dl {
      margin-top: 10px;
    }

    .news dt,
    .news dd {
      display: table-cell;
    }

    .news dt {
      width: 120px;
      color: #7d7d7d;
    }

    .about p {
      margin-bottom: 40px;
    }

    .about dl {
      width: 100%;
      display: table;
    }

    .about dt,
    .about dd {
      line-height: 1.7;
      display: table-cell;
    }

    .about dt {
      width: 120px;
    }

    .about dd span {
      margin-left: 0.5em;
      font-size: 12px;
    }

    .session .article {
      width: 100%;
      background: rgba(255, 255, 255, 0.85);
    }

    .session .schedule dl {
      width: 100%;
      height: 100%;
      padding: 30px 0;
      /*  border-bottom: 1px solid #fff; */
      line-height: 1.3;
      display: flex;
      align-items: center;
    }

    .session .schedule dl:first-child {
      border-top: 1px solid #f68b6f;
    }

    .session .schedule dd {
      padding: 0 20px;
      white-space: nowrap;
    }

    .session .schedule dt {
      font-weight: bold;
      flex: 1;
    }

    .session .schedule dd:last-child {
      width: 270px;
    }

    .session .affiliation {
      font-size: 12px;
    }

    .session .affiliation::after {
      content: "\A";
      white-space: pre;
    }

    .session .affiliation::before {
      content: "\A";
      white-space: pre;
    }

    .session dd {
      padding: 0 20px;
      white-space: nowrap;
    }

    .session dl {
      width: 100%;
      height: 100%;
      padding: 0px 0;
      /*  border-bottom: 1px solid #fff; */
      line-height: 1.3;
      display: flex;
      align-items: center;
    }


    .session ul {
      margin-bottom: 20px;
      text-align: center;
    }

    .session ul li {
      margin: 0 20px;
      font-size: 20px;
      display: inline-block;
    }

    .session ul li.active {
      padding-bottom: 3px;
      border-bottom: 2px solid #333333;
    }

    .session ul li a {
      color: #757780;
    }

    .session ul li.active a {
      color: #333333;
    }

    .session #line {
      background-image: url("../img/bg_line.jpg");
    }

    .session #panel {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      background: rgba(236, 230, 230);
      opacity: 1;
    }

    .session #panel h1 {
      width: 100%;
      margin-bottom: 0;
      font-weight: 500;
      line-height: 70px;
      color: #333333;
      border-radius: 8px;
      cursor: pointer;
      /* position: center; */
      position: relative;
      transition: all .3s;
      background-image: url("../img/bg_title.jpg");
    }

    .session #panel dt {
      font-weight: bold;
      flex: 1;
      text-align: left;
    }

    .session #panel h1:hover {
      background: #cdcdcd;
    }

    .session #panel h1:active {
      background: #ededed;
    }

    .session #panel h1.active {
      /*  background: #fff; */
      background-image: url("../img/bg_title.jpg");
    }

    .session #panel h1:before {
      /* position: absolute; */
      position: relative;
      top: 0;
      right: 3%;
      /* content: "\f196"; */
      font-family: fontAwesome;
    }

    .session #panel h1.active:before {
      /* content: "\f147"; */
    }

    .session #panel h1 {
      width: 100%;
      font-size: 16px;
      line-height: 24px;

    }

    .session table {
      width: 460px;
      margin: 20px 0;
      font-size: 12px;
      line-height: 40px;
    }

    .session #panel h1:hover {
      background: #ededed;
      background: #fff;
    }

    .session #panel h2 {
      font-size: 20px;
      font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Roboto, "Droid Sans", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
      font-weight: bold;
      text-align: left;
      letter-spacing: normal;
      margin: 32px 0;
    }


    .session p {
      font-size: 12px;
    }

    .session .scroll {
      overflow: auto;
      margin-bottom: 40px;
      text-align: center;
      background-image: url("../img/bg_text.jpg");
      background-repeat: repeat-y;
      /* white-space: nowrap; */
    }

    .scroll::-webkit-scrollbar {
      height: 4px;
    }

    .scroll::-webkit-scrollbar-track {
      background: #F1F1F1;
    }

    .scroll::-webkit-scrollbar-thumb {
      background: #BCBCBC;
    }

    .modal .wrap {
      width: 90%;
      padding: 24px 0;
    }

    .modal .wrap+.wrap {
      padding: 0 0 24px 0;
    }

    .modal h1 {
      font-size: 20px;
      font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Roboto, "Droid Sans", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
      font-weight: bold;
      text-align: center;
      letter-spacing: normal;
      margin: 32px 0;
    }

    .modal p {
      font-size: 14px;
    }

    .modal img {
      max-width: 100%;
    }

    .modal ul {
      text-align: center;
    }

    .modal ul.portrait li {
      margin: 16px 8px;
      display: inline-block;
    }

    .modal .portrait img {
      max-width: 160px;
      max-height: 160px;
      border-radius: 5%;
    }

    .modal .name {
      font-size: 18px;
      text-align: center;
      font-weight: 500;
    }

    .modal .affiliation {
      font-size: 16px;
      text-align: center;
      margin-bottom: 8px;
      color: #707070;
    }

    .modal .room {
      font-size: 18px;
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      text-align: center;
      color: #707070;
    }

    .modal .data {
      margin-bottom: 24px;
      text-align: left;
    }

    .data a {
      color: #eb6650;
      text-decoration: underline;
    }

    .modal .profile:before {
      content: "\A";
      white-space: pre;
    }

    .modal .profile p {
      font-size: 12px;
      text-align: left;
    }

    .modal .profile .name {
      font-size: 16px;
      text-align: left;
      margin-bottom: 0;
    }

    .modal .profile .affiliation {
      font-size: 14px;
      text-align: left;
      margin-bottom: 8px;

    }

    .modal .profile .affiliation span {
      font-size: 12px;
      padding-left: 0.5em;
    }

    .ticket dl {
      width: 100%;
      display: table;
    }

    .ticket dt,
    .ticket dd {
      line-height: 1.7;
      display: table-cell;
    }

    .ticket dt {
      width: 120px;
    }

    #ggmap {
      width: 100%;
      height: 400px;
      margin: 0 0 60px 0;
      padding: 0;
      background: #e5e5e5;
    }

    .sponsor {
      background: #ffffff;
      text-align: center
    }

    .sponsor h2 {
      margin-bottom: 20px;
      font-size: 16px;
      font-family: "Roboto", sans-serif;
      color: #aaaaaa;
    }

    .sponsor img {
      max-width: 90%;
      height: auto;
      vertical-align: bottom;
    }

    .sponsor ul {
      width: 820px;
      margin: 0 auto 60px auto;
      font-size: 0;
      display: flex;
      justify-content: space-between;
      align-content: space-around;
      flex-wrap: wrap;
    }

    .sponsor ul.platinum li {
      justify-content: space-around;
      margin-bottom: 50px;
    }

    .sponsor ul.gold li {
      width: calc(50% - 20px);
      margin-bottom: 50px;
    }

    .sponsor ul.silver li {
      width: calc(40% - 20px);
      margin-bottom: 30px;
    }

    .sponsor ul.copper li {
      width: calc(30% - 20px);
      margin-bottom: 30px;
    }

    .sponsor ul.bronze li {
      width: calc(30% - 20px);
      margin-bottom: 30px;
    }

    .sponsor #panel h1 {
      width: 100%;
      margin-bottom: 0;
      background: #ededed;
      background: #e7e3e0;
      font-weight: 500;
      line-height: 70px;
      color: #333333;
      border-radius: 8px;
      cursor: pointer;
      position: relative;
      transition: all .3s;
    }

    .sponsor #panel h1:hover {
      background: #cdcdcd;
    }

    .sponsor #panel h1:active {
      background: #ededed;
      background: #fff;
    }

    .sponsor #panel h1.active {
      /*  background: #fff; */
      background: #e7e3e0;
    }

    .sponsor #panel h1:before {
      position: absolute;
      top: 0;
      right: 3%;
      content: "\f196";
      font-family: fontAwesome;
    }

    .sponsor #panel h1.active:before {
      content: "\f147";
    }

    .sponsor table {
      width: 100%;
      margin: 40px 0;
      line-height: 70px;
      table-layout: fixed;
    }

    .sponsor tr {
      border-bottom: 1px solid #ededed;
    }

    .sponsor tr:nth-child(all) {
      /*  background: #e7e3e0;*/
      background: #fcfcfc;

    }

    .sponsor th {
      font-weight: 500;
      text-align: center;
    }

    .sponsor .tit th {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      letter-spacing: 0.1em;
    }

    .sponsor td {
      text-align: center;
    }

    .sponsor p {
      font-size: 14px;
      text-align: left;
    }

    .sponsor p+p {
      margin-top: 14px;
    }

    .fadeIn {
      opacity: 1.0;
    }

    .tag {
      width: 50px;
      margin-right: 10px;
      padding: 0px 0;
      font-size: 9px;
      font-size: 0.9rem;
      text-align: center;
      color: #fff;
      float: left;
    }

    .tag-sp {
      width: 90px;
      margin-right: 10px;
      padding: 0px 0;
      font-size: 7px;
      font-size: 0.9rem;
      text-align: center;
      color: #fff;
      float: left;
    }

    .engineering {
      background: #ff2700 !important;
    }

    .artist {
      background: #24a4f5 !important;
    }

    .sp,
    .production {
      background: #00c775 !important;
    }

    .business,
    .etc {
      background: #fe9300 !important;
    }

    .gamedesign,
    .new {
      background: #fe5c01 !important;
    }

    .sound {
      background: #920783 !important;
    }

    .rt,
    .collaboration {
      background: #920783 !important;
    }

    /* animated */

    .relative {
      position: relative;
    }

    .absolute {
      position: absolute;
      left: 0px;
      top: 0px;
    }

    .ticketbox {
      width: 100%;
      padding: 20px 0;
      background: #fe5c01;
      text-align: center;
      position: fixed;
      left: 0;
      bottom: 0;
    }

    .ticketbox .btn {
      margin: 0;
    }

    .ticketbox .btn a {
      width: 250px;
      padding: 16px;
      border: 3px solid #fff;
      font-size: 18px;
      font-size: 1.8rem;
      color: #fff;
      display: inline-block;
    }

    .ticketbox .btn a:hover {
      border-color: #000;
      color: #000;
      text-decoration: none;
    }

    #image_map {
      max-width: 100%;
      width: auto;
    }

    /*  scroll down */

    .sd a {
      position: absolute;
      bottom: 20px;
      left: 49%;
      z-index: 2;
      display: inline-block;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      text-decoration: none;
      padding-top: 80px;
    }

    .sd a span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      border-left: 1px solid #000;
      border-bottom: 1px solid #000;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb 2s infinite;
      animation: sdb 2s infinite;
      opacity: 0;
      box-sizing: border-box;
    }

    .sd a span:nth-of-type(1) {
      -webkit-animation-delay: 0s;
      animation-delay: 10s;
    }

    .sd a span:nth-of-type(2) {
      top: 16px;
      -webkit-animation-delay: 10.15s;
      animation-delay: 10.15s;
    }

    .sd a span:nth-of-type(3) {
      top: 32px;
      -webkit-animation-delay: 10.3s;
      animation-delay: 10.3s;
    }

    /** new **/

    @media screen and (max-width: 600px) {
      #app {
        width: 100%;
        margin: 0 auto;
      }

      #app2 {
        width: 100%;
        margin: 0 auto;
      }

      #app3 {
        width: 100%;
        margin: 0 auto;
      }

      #app4 {
        width: 100%;
        margin: 0 auto;
      }

      .wrapper {
        width: 90%;
        margin: 0 auto;
        text-align: center;
      }

      .card-wrapper {
        position: absolute;
        margin: 0 auto;
        bottom: 0;
        width: 10%;
        transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      @keyframes scale-animation {
        0% {
          transform: scale(1);
          opacity: 0;
        }

        50% {
          transform: scale(1.1);
          opacity: 1;
        }

        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      #sorted-image {
        width: 100%;
        height: auto;
        margin: 0 auto;
        opacity: 0;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
      }

      table {
        width: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        flex-wrap: wrap;
        overflow-x: hidden;
      }

      tbody {
        margin: 0;
        padding: 0;
        width: 100%;
        display: block;
      }

      .left-column {
        order: 1;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        overflow: hidden;
      }

      .right-column {
        order: 2;
        width: 100%;
        margin-top: 20px;
        padding: 0 10px;
        box-sizing: border-box;
      }

      #sorted-image {
        width: 100%;
        height: auto;
        margin: 0 auto;
      }

      tr {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      td {
        width: 100%;
        text-align: center;
      }
    }

    @media screen and (max-width: 1000px) {
  .sponsor ul {
    display: flex;
    flex-direction: column; /* 画像を縦に並べる */
    align-items: center;    /* 中央揃え */
    gap: 20px;              /* 各画像の間隔を設定 */
  }

  .sponsor ul li {
    width: 100%; /* 必要に応じてリスト項目の幅を調整 */
    text-align: center; /* 画像を中央揃え */
  }

  .sponsor ul li img {
    max-width: 90%; /* 画像サイズを調整 */
    height: auto;
  }
      h1 {
        margin-bottom: 40px;
        font-size: 24px;
        font-weight: 500;
      }

      article+article {
        margin-top: 30px;
      }

      .pcNone {
        display: inline;
      }

      .wrap {
        width: 85%;
      }


      body:before {
        background: repeat center top;
        background-size: cover;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-bottom: 0;
        content: "";
        z-index: -1;
      }

      nav {
        font-size: 16px;
      }

      header {
        background: none;
      }

      header h1 {
        margin-bottom: 10px;
      }

      header h1 img {
        width: 300px;
      }

      header h2 {
        font-size: 24px;
        margin-bottom: 4px;
      }

      header h3 {
        font-size: 13px;
      }

      header .logo h4 a {
        font-size: 16px;
      }

      .news {
        font-size: 12px;
      }

      .news dt,
      .about dt {
        width: 80px;
      }

      .about p {
        font-size: 14px;
      }

      .about dl {
        font-size: 12px;
      }

      .ticket dl {
        font-size: 12px;
      }

      .session ul {
        margin-bottom: 40px;
      }

      .session ul li {
        margin: 0 5px;
        font-size: 14px;
      }

      .session .schedule dl {
        padding: 20px 0;
        display: block;
      }

      .session .schedule dt {
        padding: 5px 0;
        font-size: 14px;
      }

      .session .schedule dd {
        padding: 0;
        font-size: 12px;
      }

      .session .affiliation {
        font-size: 10px;
      }

      .modal h1 {
        font-size: 14px;
        text-align: left;
      }

      .modal p {
        font-size: 12px;
      }

      .modal .name {
        font-size: 14px;
        margin-bottom: 0px;
      }

      .modal .affiliation {
        font-size: 12px;
      }

      .modal .room {
        font-size: 12px;
      }

      .modal .data {
        margin-bottom: 16px;
      }

      .data a {
        color: #eb6650;
        text-decoration: underline;
      }

      .modal .profile p {
        font-size: 12px;
      }

      .modal .profile .name {
        font-size: 12px;
      }

      .modal .profile .affiliation {
        font-size: 9px;
      }

      .modal .profile .affiliation span {
        font-size: 8px;
      }

      .modal .profile .data {
        font-size: 10px;
      }

      .modal ul.portrait li {
        margin: 8px;
      }

      .modal .portrait img {
        max-width: 70px;
        max-height: 70px;
      }

      .access ul li {
        font-size: 12px !important;
      }

      #ggmap {
        height: 300px;
        margin-bottom: 30px;
      }

      .sponsor h2 {
        font-size: 12px;
      }

      .sponsor ul {
        width: 100%;
        margin-bottom: 30px;
      }

      .sponsor ul.gold li,
      {
      width: calc(20% - 10px);
    }

    .sponsor ul.silver li,
    .sponsor ul.copper li,
    .sponsor ul.bronze li {
      width: calc(50.0% - 10px);
    }

    .sponsor #panel h1 {
      width: 100%;
      font-size: 16px;
      line-height: 44px;
    }

    .sponsor table {
      width: 460px;
      margin: 20px 0;
      font-size: 12px;
      line-height: 40px;
    }

    .sponsor #panel h1:hover {
      background: #ededed;
    }

    .sponsor p {
      font-size: 12px;
    }

    .sponsor .scroll {
      overflow: auto;
      white-space: nowrap;
      margin-bottom: 40px;
    }

    .scroll::-webkit-scrollbar {
      height: 4px;
    }

    .scroll::-webkit-scrollbar-track {
      background: #F1F1F1;
    }

    .scroll::-webkit-scrollbar-thumb {
      background: #BCBCBC;
    }

    footer {
      font-size: 12px;
    }

    footer .logo {
      width: 80px;
    }
  footer .btn {
    text-align: center; 
  }

  footer .btn a {
    margin: 0 auto; 
    display: inline-block; 
  }
    .card-wrapper {
      position: absolute;
      margin: 0 auto;
      bottom: 0;
      width: 9%;
      transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes scale-animation {
      0% {
        transform: scale(1);
        opacity: 0;
      }

      50% {
        transform: scale(1.1);
        opacity: 1;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    #sorted-image {
      width: 400px;
      height: auto;
      margin: 0 auto;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    table {
      width: 100%;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }

    .left-column {
      order: 1;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .right-column {
      order: 2;
      width: 100%;
      margin-top: 20px;
      padding: 0 10px;
      box-sizing: border-box;
    }

    #sorted-image {
      width: 400px;
      height: auto;
      margin: 0 auto;
    }

    tr {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    td {
      width: 100%;
      text-align: center;
    }
      #panel h1 {
    text-align: center; 
    line-height: 1.5; 
  }

  #panel h1 dl {
    display: block; 
    margin: 0 auto; 
  }

  #panel h1 dl dt {
    font-size: 1.2rem; 
    margin-bottom: 10px; 
  }

  #panel h1 dl dd {
    font-size: 1rem; 
    margin: 5px 0; 
  }

  .affiliation {
    display: block; 
    font-size: 0.9rem; 
    margin-top: 5px; 
  }
    }

    @media only screen and (min-width: 600px) {
      #app {
        width: 580px;
      }

      #app2 {
        width: 580px;
      }

      #app3 {
        width: 580px;
      }

      #app4 {
        width: 580px;
      }

      .value {
        font-size: 1.75rem;
      }

      .label {
        font-size: 1.75rem;
      }

      @keyframes scale-animation {
        0% {
          transform: scale(1);
          opacity: 0;
        }

        50% {
          transform: scale(1.1);
          opacity: 1;
        }

        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      #sorted-image {
        max-width: 100%;
        opacity: 0;
        transform: scale(1);
        visibility: hidden;
      }

      #delayed-text {
        visibility: hidden;
      }

      table {
        width: 450px;
        border-collapse: collapse;
        margin: 0 auto;
      }

      th,
      td {
        text-align: center;
        padding: 8px;
      }

      th {
        background-color: #f4f4f4;
      }

      .left-column {
        width: 45%;
      }

      .right-column {
        width: 55%;
      }
    }