/* General */
@charset "utf-8";

.mrg_bottom20 {
  margin-bottom: 20px;
}

@font-face {
  font-family: "Orator Std"; /*要素に指定するときに使うフォント名*/
  src: url("https://takashi-masubuchi.com/fonts/OratorStd_woff.woff2") format("woff2"),
    /*先に記述するほど優先度高*/ url("https://takashi-masubuchi.com/fonts/OratorStd_woff.woff") format("woff"),
    url("https://takashi-masubuchi.com/fonts/OratorStd.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("https://takashi-masubuchi.com/fonts/OratorStd.otf") format("opentype");
  font-display: swap;
}

body {
  background-color: #0f0800;
}

#wrapper {
  display: flex;
  font-family: Times New Roman, Goudy Old Style, Garamond, Big Caslon, serif, ヒラギノ明朝 ProN, HiraMinProN,
    ＭＳ Ｐ明朝, MS PMincho;
}

#foot {
  position: fixed;
  bottom: 0px;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  height: 20px;
  font-size: 9px;
  background-color: #fff;
  color: #666;
}

p {
  line-height: 22px;
  letter-spacing: 2px;
}

h1 {
  font-size: 0.9em;
  line-height: 22px;
  font-family: "Orator Std", "Rufina", ヒラギノ明朝 ProN W6, HiraMinProN-W6, HG明朝E, ＭＳ Ｐ明朝, MS PMincho;
}

h1 a {
  color: #fff;
}

h2 {
  text-align: center;
  margin: 0 auto 50px;
  font-size: 1.5em;
  padding: 0 0 10px 0;
  font-family: "Orator Std", "Rufina", ヒラギノ明朝 ProN W6, HiraMinProN-W6, HG明朝E, ＭＳ Ｐ明朝, MS PMincho;
  border-bottom: double 1px #fff;
}

h3 {
  font-size: 1.3em;
  padding: 0 0 10px 0;
  font-weight: bold;
}

h4 {
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  padding: 10px 0;
}

h4 a {
  color: #fff;
}

p a {
  color: #fff !important;
}

p small {
  font-size: 0.7em;
}

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff !important;
}

main a {
  border-bottom: 1px solid #fff;
}
a::after {
  position: absolute;
  bottom: 7px;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s;
}

a:hover::after {
  transform: scale(1, 1);
}
main a:hover::after {
  transform: scale(0, 0);
}

small {
  font-size: 9px;
  letter-spacing: 0.3px;
}

small a {
  color: #fff;
}

.smalll-tetter {
  font-size: 0.8em;
  letter-spacing: 1px;
}

.center_pack {
  text-align: center;
}
.right_pack {
  text-align: right;
}

#main_bg {
  background-color: #0f0800;
  height: 100%;
  width: 100vw;
}

#main_box_w600 {
  max-width: 600px;
  padding: 20px;
  margin: 0 auto;
}

#main_box_w800 {
  max-width: 800px;
  padding: 20px;
  margin: 0 auto;
}

.cont_box {
  border-bottom: 1px dotted #aca4a4;
  padding: 20px 0 60px 0;
}

.leftside {
  background-color: #000;
  width: 350px;
  min-height: 100vh;
}

/* release */

.release {
  display: flex;
  flex-wrap: wrap;
}

.release li {
  width: 225px;
  margin: 0 40px 100px 0px;
}

.release li:nth-of-type(3n) {
  margin: 0 0px 100px 0px;
}

.release li img {
  margin: 0 auto;
  display: block;
  width: 200px;
}

.tooltip_display {
  position: relative;
}

.tooltip_display::before {
  position: absolute;
  top: 20px;
  transform: rotate(-25deg);
  content: "RECOMMEND";
  margin: 0 auto;
  padding: 0 10px 0 10px;
  border: #fff 1px solid;
  border: #813636 2px solid;
  background-color: #813636;
  color: #ffffff;
  animation-name: fadeDownAnime;
  animation-delay: 1s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.bandcampLink a {
  border: 1px solid #fff;
  display: inline-block;
  padding: 5px;
  width: 300px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 40px;
}

@media screen and (max-width: 912px) {
  @keyframes fadeDownAnime {
    from {
      opacity: 0;
      transform: translateY(-200px);
    }

    to {
      opacity: 1;
      transform: rotate(-25deg);
    }
  }
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(200px);
  }

  to {
    opacity: 1;
    transform: rotate(-25deg);
  }
}

/* movie */
.movie {
  display: flex;
  flex-wrap: wrap;
}

.movie li {
  width: 350px;
  display: block;
  margin: 0 50px 100px 0px;
  text-align: center;
}

.movie li:nth-of-type(2n) {
  margin: 0 0px 100px 0px;
}
/* schedule */

/* article */

.readmore {
  border: 1px solid #fff;
  display: table;
  padding: 5px;
  min-width: 150px;
  text-align: center;
  margin: 15px 0 0 auto;
}

.readmore a {
  display: block;
  color: #fff;
  border-bottom: 0px;
}

.writer {
  margin: 0 0 10px 0;
}

.active {
  margin-left: -200px;
  opacity: 0;
}

.active .gn {
  left: -200px;
}

/* gn */
.gn {
  transition: 0.8s ease-in;
}

@media screen and (min-width: 913px) {
  .gn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    letter-spacing: 3px;
    line-height: 35px;
  }
}

.gn li {
  text-shadow: 1px 1px 2px #333;
  font-family: Orator Std, Rufina, ヒラギノ明朝 ProN W6, HiraMinProN-W6, HG明朝E, ＭＳ Ｐ明朝, MS PMincho;
}

.gn li a {
  color: #fff;
}

@media screen and (max-width: 912px) {
  .leftside {
    position: fixed;
    padding: 0px 0;
    left: -50%;
    width: 50%;
    height: 100%;
    /* メニューを縦に */
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    transition: 0.3s;
    z-index: 100;
  }

  #main_box_w600 {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
  }

  #main_box_w1000 {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
  }

  .release {
    display: block;
    margin: 0 auto;
  }

  .release li {
    width: 100%;
    padding: 0 20px;
    display: block;
    margin: 0 auto 80px;
  }

  .release li:nth-of-type(3n) {
    margin: 0px auto 100px;
    padding: 0 20px;
  }

  .movie {
    display: block;
    margin: 0 auto;
  }

  .movie li {
    display: block;
    margin: 0 auto 100px;
  }

  .movie li:nth-of-type(2n) {
    display: block;
    margin: 0px auto 100px;
  }

  #gn_box {
    position: absolute;
    bottom: 80px;
  }
  .gn li {
    line-height: 35px;
    padding: 0 0 0 20px;
    font-family: Orator Std, Rufina, ヒラギノ明朝 ProN W6, HiraMinProN-W6, HG明朝E, ＭＳ Ｐ明朝, MS PMincho;
  }

  .btn {
    /* ボタンの配置位置  */
    position: fixed;
    top: 32px;
    right: 20px;
    /* ボタンの大きさ  */
    width: 30px;
    height: 18px;
    /* 最前面に */
    z-index: 10;
  }

  .btn-line {
    display: block;
    position: relative; /* バーガー線の位置基準として設定 */
    width: 100%; /* 線の長さと高さ */
    height: 4px;
    background-color: #d6d5d5; /* バーガー線の色 */
    transition: 0.2s;
  }

  .btn-line::before,
  .btn-line::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #d6d5d5;
    transition: 0.5s;
  }
  .btn-line::before {
    /* 上の線の位置 */
    transform: translateY(-12px);
  }
  .btn-line::after {
    /* 下の線の位置 */
    transform: translateY(12px);
  }

  /***** メニューオープン時 *****/
  .btn-line.open {
    background-color: transparent; /* 真ん中の線を透明に */
  }
  .btn-line.open::before,
  .btn-line.open::after {
    content: "";
    background-color: #fff; /* 上下の線の色を変える */
    transition: 0.2s;
  }
  .btn-line.open::before {
    transform: rotate(45deg); /* 上の線を傾ける */
  }
  .btn-line.open::after {
    transform: rotate(-45deg); /* 下の線を傾ける */
  }

  .gn.open {
    left: 0;
  }

  .leftside.open {
    left: 0;
  }
}

/* Ohter */

/* Header */
.title_box {
  position: fixed;
  padding: 20px;
  font-family: Orator Std, Rufina, ヒラギノ明朝 ProN W6, HiraMinProN-W6, HG明朝E, ＭＳ Ｐ明朝, MS PMincho;
}