:root {
  --content-margin: calc(var(--label-height) / 8.5);
  --header-height: calc(var(--title-height) + var(--subtitle-height));
  --title-height: 6vh;
  --title-font-size: calc(var(--title-height) - 15px);
  --subtitle-height: 4vh;
  --subtitle-font-size: calc(var(--subtitle-height) - 10px);
  --all-font-size: calc(var(--label-height) / 6);
  --menu-width: 10vw;

  --label-list-height: calc(100vh - var(--title-height) * 2);
  --label-list-width: 29vw;
  --min-label-list-width: calc(var(--label-height) * 4);
  --label-height:12vh;

  --description-title-font-size: calc(var(--all-font-size) + 2px);
  --description-composer-font-size: var(--all-font-size);
  --content-height: 100vh;
  --description-section-height: calc((var(--description-title-font-size) + var(--description-composer-font-size)) * 1.8);
  --content-width: calc(100vw - var(--label-list-width));
  --youtube-margin: calc(var(--content-width) * 0.025);
  --youtube-height: calc(100vh - var(--header-height) - var(--description-section-height) - var(--content-margin) - var(--youtube-margin));
  --youtube-width: calc(var(--youtube-height) / 9 * 16);
  --max-youtube-width: calc(var(--content-width) * 0.9);
}

/* @media (max-width: 1000px){
  :root {
    --title-height: 11.5vh;
    --title-font-size: calc(var(--title-height) - 13px);
    --subtitle-height: 5.5vh;
    --subtitle-font-size: calc(var(--subtitle-height) - 5px);
    --all-font-size: calc(var(--label-height) / 6);

    --label-list-width: 33vw;
    --label-list-height: 83vh;
    --label-height: 17vh;

    --content-height: 83vh;
  }
} */

@media (max-aspect-ratio: 1/1){
  :root {
    --select-div-order: 2;
    --content-div-order: 1;
    --flex-direction-style: column;

    --title-height: 4.5vh;
    --title-font-size: calc(var(--title-height) - 10px);
    --subtitle-height: 3.7vh;
    --subtitle-font-size: calc(var(--subtitle-height) - 10px);
    --menu-width: 20vw;

    --label-list-height: calc((100vh - var(--title-height) - var(--content-height)));
    --label-list-width: 100vw;
    --label-height:10vh;

    --content-height: calc(var(--youtube-height) + var(--description-section-height) + var(--youtube-margin) * 2);
    --content-width: 100vw;

    --youtube-width: calc(var(--label-list-width) - var(--youtube-margin) * 2);
    --max-youtube-width: var(--youtube-width);
    --youtube-height: calc(var(--youtube-width) / 16 * 9)
  }
}

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

::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 5px;
}

body{
  /* background-color: #fdd22b; */
  font-size: var(--all-font-size);
  font-family: "Marcellus", "Kaisei Decol";
  font-weight: 400;
  font-style: normal;
  color:#d2d5f4;

  background-image: url('../resources/image/common/background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.fade-in-element {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.visible-element {
  opacity: 1;
  transition-delay: 0s;
}

.header_section{
  display: flex;
  /* flex-direction: column; */
  flex-direction: row;
  position: fixed;
  margin: 0px;
  width: 100vw;
  height: var(--header-height);
  z-index: 1;
}

  .title {
    /* background-color: #fdd22b; */
    background-color: rgba(255, 255, 255, 0);
    display:flex;
    padding-left: 10px;
    vertical-align: middle;
    width: calc(100vw - var(--menu-width));
    height: var(--title-height);
    font-size:var(--title-font-size);
  }

  .subtitle_div {
    /* background-color: #fdd22b; */
    background-color: rgba(255, 255, 255, 0);
    display:flex;
    padding-left:var(--subtitle-font-size);
    margin: 0px;
    width: calc(100vw - var(--menu-width));
    height: var(--subtitle-height);
    vertical-align: middle;
    font-size:var(--subtitle-font-size);
    color:#d2d5f4;
  }

  .common_menu {
    display: inline-block;
    /* vertical-align: top; */
    text-align: center;
    /* background-color: aqua; */
    width: var(--menu-width);
    /* margin: var(--content-margin); */
    font-size: calc(var(--title-font-size) + var(--subtitle-font-size));
  }

.main_section {
  display: flex;
  flex-direction: var(--flex-direction-style);
  position: sticky; /* 固定位置 */
  padding-top: var(--header-height);
  width: 100vw;
}

  .label_list_div {
    display: inline-block;
    order: var(--select-div-order);
    overflow: auto; /* スクロール可能 */
    width: var(--label-list-width);
    height: var(--label-list-height);
    min-width: var(--min-label-list-width);
    z-index: 0;
  }

    .label_div {
      border-radius: 10px;
      position:relative;
      /* background-color: #fadb5e; */
      background-color: rgba(255, 255, 255, 0.6);
      margin: var(--content-margin);
      display:flex;
      height: var(--label-height);
      color: #535c64;
      z-index: 5;
      font-size: var(--all-font-size);
    }
    .label_div:hover {
      color: #535c64;
      /* background-color: #ffe57b; */
      background-color: rgba(255, 255, 255, 0.8);
    }

    .label_div_clicked {
      color: #535c64 !important;
      /* background-color: #ffec9f !important; */
      background-color: rgba(255, 255, 255, 0.8);
    }

      .thumbnail {
        display:inline-block;
        object-fit: cover;
        background-color: rgb(187, 167, 160);
        border-radius: 10px;
        width: var(--label-height);
        height: var(--label-height);
        z-index: 2;
      }

      .selectlabel_div {
        display:inline-block;
        /* width: var(--description-size); */
        height: 100%;
        z-index: 3;
      }

        .discography_title {
          display:inline-block;
          font-weight: bold;
          padding-top: calc(var(--all-font-size) / 1.5);
          padding-left: calc(var(--all-font-size) / 2);
          align-items: center;
          width: 100%;
          height: 45%;
          z-index: 4;
          white-space: nowrap;       /* テキストを1行にする */
          overflow: hidden;          /* はみ出した部分を非表示にする */
          text-overflow: ellipsis;   /* はみ出した部分に省略記号を表示する */
        }

        .composer {
          display:inline-block;
          padding-top: calc(var(--all-font-size) / 1.5);
          padding-left: calc(var(--all-font-size) / 2);
          width: 100%;
          height: 55%;
          z-index: 4;
          white-space: nowrap;       /* テキストを1行にする */
          overflow: hidden;          /* はみ出した部分を非表示にする */
          text-overflow: ellipsis;   /* はみ出した部分に省略記号を表示する */
        }

  .content_div {
    order: var(--content-div-order);
    position: sticky;
    height: var(--content-height);
    margin: 0 auto;
  }

    .descripton_section {
      display: flex;
      flex-direction: row;
      width: var(--youtube-width);
      max-width: var(--max-youtube-width);
      height: var(--description-section-height);
      margin-left: var(--youtube-margin);
      margin-right: var(--youtube-margin);
      margin-bottom: var(--content-margin);
      /* background-color: #fadb5e; */
      background-color: rgba(255, 255, 255, 0.8);
      color:#535c64;
      border-radius: 10px;
    }
      .title_disp {
        width: calc(var(--youtube-width) * 0.8);
        max-width: calc(var(--max-youtube-width) * 0.8);
        padding-top: calc(var(--description-title-font-size)/3);
        padding-left: calc(var(--description-composer-font-size) / 2);
        font-size: var(--description-title-font-size);
        font-weight: bold;
        /* vertical-align: middle; */
      }
      .composer_disp {
        width:  calc(var(--youtube-width) * 0.8);
        max-width: calc(var(--max-youtube-width) * 0.8);
        padding-top: calc(var(--description-composer-font-size)/3);
        padding-left: calc(var(--description-title-font-size) / 2);
        font-size: var(--description-composer-font-size);
        /* vertical-align: middle; */

      }
      .playerbutton {
        display: inline-block;
        vertical-align: middle;
        text-align: right;
        padding-right: var(--youtube-margin);
        height: var(--description-section-height);
        width:  calc(var(--youtube-width) * 0.2);
        max-width: calc(var(--max-youtube-width) * 0.2);
        font-size: calc(var(--description-section-height) / 4 * 3);
      }
    .player {
      margin-left: var(--youtube-margin);
      margin-right: var(--youtube-margin);
      width: var(--youtube-width);
      max-width: var(--max-youtube-width);
      height: calc(var(--youtube-width) / 16 * 9);
    }
    
      iframe {
        border-radius: 10px;
        width: 100%;
        height: 100%;
      }

      #thumbnail_image {
        border-radius: 10px;
        width: 100%;
        height: 100%;
      }
#banner {
  position: sticky;
  
}