/* normalize */
body {
  margin: 0;
  background-color: #B5B5B5;
}

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-size: 11pt;
}

p, h2{
  color: white;
}

.ja{
  font-size: 10.5pt;
}

.main{
  background-color: #7C7C7C;
  width: 50%;
  min-height: 100vh;
  margin: 0 auto;
  overflow: auto;
}

.main .container{
  width: 80.4%;
  margin: auto;
}

.title{
  height: 7em;
  padding: 3em 0px;
}

.title-left{
  text-align: left;
  float: left;
}

.title-right{
  text-align: right;
}

.logs{
  width: 83%;
  margin: auto;
  /* padding-bottom: 110px; */
}

.logs div{
  background-color: white;
  color: black;
  margin: 30px 0px;
  padding: 5px 10px;
}

.logs .change_log{
  min-height: calc(1.2em*16);
  overflow-y: hidden;
  white-space: pre;
}

.change_log div{
  margin: unset;
  padding: unset;
  line-height: 1.2em;
}

.change_log div:nth-child(n+17){
  display: none;
}


.video-wrapper{
  width:100%;
  padding-bottom: 100%;
  height:0px;
  position: relative;
  overflow: hidden;
}

.video-wrapper video{
  position: absolute;
  /* left: -1px; */
  left: -50%;
  width: calc(200% + 5px);
}

.video-wrapper #switch-cb{
  display: none;
}

.video-wrapper #switch-icon {
  margin: 2.2% 2%;
  width: 4%;
  position: absolute;
  display: flex;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 1;
}

.video-wrapper #switch-icon img{
  width: 100%;
}

.video-wrapper #switch-cb:checked ~ video{
  left: unset !important;
  right: -1px !important;
}

input[type="range"] {
  -webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく */
  outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
  height: 9px; /* バーの高さ */
  width: 100%; /* バーの幅 */
  background: #000000; /* バーの背景色 */
  border-radius: 10px; /* バーの両端の丸み */
  border: none; /* バー周囲の線 */
  margin: 30px 0px;
}
/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
  background: #00FFFF; /* 背景色 */
  width: 42px; /* 幅 */
  height: 42px; /* 高さ */
  border-radius: 50%; /* 円形に */
  border: solid 3px #000000; /* デフォルトの線 */
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
  background: #00FFFF; /* 背景色 */
  width: 42px; /* 幅 */
  height: 42px; /* 高さ */
  border-radius: 50%; /* 円形に */
  border: solid 3px #000000; /* デフォルトの線 */
}
/* Firefoxで点線が周りに表示されてしまう問題の解消 */
input[type="range"]::-moz-focus-outer {
  border: 0;
}
/* つまみをドラッグしているときのスタイル */
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}

.description-wrapper{
  width: 25%;
  min-height: 100%;
  top: 0;
  right: 0;
  padding-bottom: 25px;
}

.description-wrapper .container{
  width: 90%;
  height: 100%;
  margin: 100px auto;
}

.contribution{
  margin: 20px 0px;
  padding-bottom: 25px;
}

.description-wrapper p {
  margin: 1em 0;
}

.description-wrapper .en-description{
  margin-top: 3em;
}

a {
  color: rgb(200 200 200);
}

a:visited {
  color: white;
}

.change_log .color-circle{
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
}

.notice{
  color: white;
}

.hide{
  display: none !important;
}

@media screen and (max-width: 1000px) {
	/* 959px以下に適用されるCSS（タブレット/スマホ用） */
  .main{
    width: 100%;
    min-height: unset;
  }
  .description-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 110px;
    background-color: #7C7C7C;
  }

  .description-wrapper .container{
    width: 80.4%;
    margin: auto;
  }

  .description-wrapper .contribution {
    position: relative;
    padding-bottom: 10px;
  }

  .description-wrapper .container div p {
    margin: 0px 0px 20px 0;
  }

  .title {
    padding: 10px 0;
    height: unset;
  }

  input[type="range"] {
    height: 4px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 28px; /* 幅 */
    height: 28px; /* 高さ */
    border-radius: 50%; /* 円形に */
    border: solid 3px #000000; /* デフォルトの線 */
  }
  /* Moz向けのつまみ */
  input[type="range"]::-moz-range-thumb {
    width: 28px; /* 幅 */
    height: 28px; /* 高さ */
    border-radius: 50%; /* 円形に */
    border: solid 3px #000000; /* デフォルトの線 */
  }

  .logs{
    padding-bottom: unset;
  }

  .logs div{
    margin: 0px 0px 30px 0px;
    padding: 1px 5px;
  }

  .change_log div{
    margin: unset;
    padding: unset;
  }

  .change_log div:nth-child(n+17){
    display: none;
  }
}