*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

li{
    list-style: none;
}

th{
    text-align: left;
    font-weight: 400;
}
body {
    width: 100%;
    background-color: white;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.font_en {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.font_a{
  font-family: "Montagu Slab", serif;
}

.font_b{
  font-family: "Bodoni Moda", serif;
}

.font_c{
  font-family: "Plus Jakarta Sans", sans-serif;
}

.font_d{
  font-family: "BIZ UDPMincho", serif;
}

.font_e{
  font-family: "Cardo", serif;
}


@media (prefers-color-scheme: dark) {
    body {
      background-color: black;
    }
    h2, a, a:link, a:visited, a:hover, a:active, span, .topMenu .menu-item ,.rightMenu .menu-item, .bottomMenu .menu-item, .leftMenu .menu-item {
      color: #fff!important;
    }
    .rightrect, .rightrect2, .rightbottomrect, .rightbottomrect2, .leftrect, .leftrect2, .leftbottomrect, .leftbottomrect2 {
        background-color: #000;
    }
    .textbox  {
        color: #fff;
    }
    .detailContainer {
        color: #fff;
    }
    .scroll { 
        color: #fff;
    }
    .bioDetails {
        color: #fff;
    }
    .PC_filter_container, .SP_filter_container {
        color: #fff;
    }
    .filter_list li::after  {
        background-color: #fff
    }
    .rightrect, .rightrect2, .rightbottomrect, .rightbottomrect2, .leftrect, .leftrect2, .leftbottomrect, .leftbottomrect2{
      background-color: #000!important;
    }
  }

@media (min-width: 768px) {
    .navImg{
        height: 20px;
        width: auto;
    }
    h2{
        font-size: 18px;
        font-weight: 400;
    }
    h1 {
        font-size: 32px;
    }
    .h1Img{
        height: 100px;
        width: auto;
    }

    .navImg{
      height: 20px;
      width: auto;
    }
  
      .topMenu {
        position: fixed;
        top: 0;
        left: -4500px; /* 右上に配置 */
        z-index: 1000;
        transition: transform 0.3s ease-out;
      }
      
      .topMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
      }
      
      .topMenu .menu-item {
        padding: 10px 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
  
      .rightMenu {
        position: fixed;
        right: 0px; /* 右上に配置 */
        transform: rotate(90deg); 
        transform-origin: top right; /* 回転の基準点を右上に設定 */
        z-index: 100;
        transition: transform 0.3s ease-out;
      }
      
      .rightMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
      }
      
      .rightMenu .menu-item {
        padding: 10px 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
      
      .bottomMenu {
        position: fixed;
        bottom: 0;
        left: 0; /* 右上に配置 */
        z-index: 1000;
        transition: transform 0.3s ease-out;
      }
      
      .bottomMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
        transform: scale(-1, -1);
      }
      
      .bottomMenu .menu-item {
        padding: 10px 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
      
      .leftMenu {
        position: fixed;
        left: 50px; 
        transform: rotate(90deg); /* メニュー全体を90度回転 */
        transform-origin: top left; /* 回転の基準点を右上に設定 */
        z-index: 100;
        transition: transform 0.3s ease-out;
      }
      
      .leftMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
        transform: scale(-1, -1);
      }
      
      .leftMenu .menu-item {
        padding: 10px 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
      
      .rightrect{
        position: fixed;
        top: 0;
        right: 0;
        width: 40px;
        height: 60px;
        background-color: #fff;
        z-index: 999;
      }
  
      .rightrect2{
        position: fixed;
        top: 0;
        right: 0;
        width: 10px;
        height: 40px;
        background-color: #fff;
        z-index: 1001;
      }
  
      
      .rightbottomrect{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 40px;
        height: 60px;
        background-color: #fff;
        z-index: 999;
      }
      
      .rightbottomrect2{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 40px;
        background-color: #fff;
        z-index: 1001;
      }
      
      .leftrect{
        position: fixed;
        top: 0;
        left: 0;
        width: 40px;
        height: 60px;
        background-color: #fff;
        z-index: 999;
      }
  
      .leftrect2{
        position: fixed;
        top: 0;
        left: 0;
        width: 10px;
        height: 40px;
        background-color: #fff;
        z-index: 1001;
      }
      
      .leftbottomrect{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 60px;
        background-color: #fff;
        z-index: 999;
      }
      
      .leftbottomrect2{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 40px;
        background-color: #fff;
        z-index: 1001;
      }
    .breadcrumb{
        margin: 30px 0;
        font-size: 12px;
    }

    .breadcrumb a .breadcrumb span{
        font-size: 12px;
    }

}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .pcOnly{
        display: none;
    }
    
    .navImg{
        height: 20px;
        width: auto;
    }
    h2{
        font-size: 16px;
        font-weight: 400;
    }

    .breadcrumb{
        margin: 20px 0;
        font-size: 12px;
    }

    .breadcrumb a .breadcrumb span{
        font-size: 12px;
    }

    th{
        width: 100px;
    }

    .topMenu {
      position: fixed;
      top: 0px;
      left: -3500px; /* 右上に配置 */
      z-index: 1000;
      transition: transform 0.3s ease-out;
    }
    
    .topMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
    }
    
    .topMenu .menu-item {
      padding: 0 10px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }
    
    .content {
      margin-top: 50px;
      padding: 20px;
    }
    
    
    .rightMenu {
      position: fixed;
      /* top: 500px; */
      right: 0; /* 右上に配置 */
      transform: rotate(90deg); /* メニュー全体を90度回転 */
      transform-origin: top right; /* 回転の基準点を右上に設定 */
      z-index: 100;
      transition: transform 0.3s ease-out;
    }
    
    .rightMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
    }
    
    .rightMenu .menu-item {
      padding: 0 10px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }
    
    .bottomMenu {
      position: fixed;
      bottom: 0;
      left: 0; /* 右上に配置 */
      z-index: 1000;
      transition: transform 0.3s ease-out;
    }
    
    .bottomMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
      transform: scale(-1, -1);
    }
    
    .bottomMenu .menu-item {
      padding: 0 10px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }
    
    .leftMenu {
      position: fixed;
      left: 40px; 
      transform: rotate(90deg); /* メニュー全体を90度回転 */
      transform-origin: top left; /* 回転の基準点を右上に設定 */
      z-index: 100;
      transition: transform 0.3s ease-out;
    }
    
    .leftMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
      transform: scale(-1, -1);
    }
    
    .leftMenu .menu-item {
      padding: 10px 20px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }
    
    .rightrect{
      position: fixed;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      background-color: #fff;
      z-index: 999;
    }
    
    .rightrect2{
      position: fixed;
      top: 0;
      right: 0;
      width: 10px;
      height: 30px;
      background-color: #fff;
      z-index: 1001;
    }
    
    .rightbottomrect{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 30px;
      height: 30px;
      background-color: #fff;
      z-index: 999;
    }
    
    .rightbottomrect2{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 30px;
      background-color: #fff;
      z-index: 1001;
    }
    
    .leftrect{
      position: fixed;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      background-color: #fff;
      z-index: 999;
    }

    .leftrect2{
      position: fixed;
      top: 0;
      left: 0;
      width: 10px;
      height: 30px;
      background-color: #fff;
      z-index: 1001;
    }
    
    .leftbottomrect{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 30px;
      height: 30px;
      background-color: #fff;
      z-index: 999;
    }
    
    .leftbottomrect2{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 10px;
      height: 30px;
      background-color: #fff;
      z-index: 1001;
    }
}