@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

:root {
  --font_base: 12;
}

@media screen and (min-width: 960px) {
  :root {
    --font_base: 16;
  }
}

img {
  vertical-align: top;
}

.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #E0E0E0;
  font-size: calc(var(--font_base) * 1px);
  font-family: sans-serif;
}

header {
  text-align: center;
  font-size: 200%;
  color: #EE0000;
  font-weight: bold;
}

footer {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  background: #FFFFFF;
  text-align: center;
}

.top_image img {
  width: 100vw;
}

.title {
  background-color: #FDF9F9;
  color: #BB0000;
  padding: 0.25em 4em;
}

.tmenu {
  font-size: 200%;
  font-weight: bold;
  color: #990000;
  text-align: center;
  margin: 0.5em auto;
}

#btn {
  width: 80%;
  webkit-appearance: none;
  border-radius: 20px;
  background-color: #444444;
  color: #BBBBBB;
}

.btn_text {
  font-size: 150%;
  line-height: calc(var(--font_base) * 1px);
  padding: 0.5em 0px;
}

.btn_text div {
  margin-bottom: 0.25em;
}

small {
  font-size: 75%;
}

@media screen and (min-width: 960px) {
  .top_image img {
    width: 960px;
  }

  #btn {
    width: 760px;
  }
}

.button_set {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
}

.button_set>div {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 75vw;
  margin: 0 auto;
}

.button_radius {
  webkit-appearance: none;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  color: #FF00FF;
  background-image: linear-gradient(45deg, #FFCCFF, #FFEEFF, #FFCCFF);
  transition: .4s;
  width: 100%;
}

@media screen and (min-width: 960px) {
  .button_set>div {
    width: 720px;
  }
}

.history {
  display: flex;
  flex-direction: column;
  width: 90vw;
  border: solid 4px #FFCCFF;
  background: #FFFEFF;
  margin: 0px auto;
}

@media screen and (min-width: 960px) {
  .history {
    width: 960px;
  }
}

.history_onerow {
  width: 100%;
  display: flex;
  flex-direction: row;
  border: solid 1px #FFCCFF;
  text-align: left;
  align-items: center
}

.history_year {
  width: 14%;
  display: flex;
  align-items: center;
  border-right: solid 2px #FFCCFF;
  align-self: stretch;
  padding-left: 0.5em;
}

.history_month {
  width: 10%;
  padding-left: 0.5em;
}

.history_data {
  width: 76%;
  margin: 1em 0px;
}

.favorite {
  display: flex;
  flex-direction: column;
  width: 90vw;
  border: solid 4px #FFCCFF;
  background: #FFFEFF;
  margin: 0.5rem auto;
}

.favorite_title,
.band_photo_title {
  width: 100%;
  background: #FFEEFF;
  color: #FF00FF;
  font-size: calc(var(--font_base) * 1.5px);
  font-weight: bold;
  padding: 1em 0px;
}

.favorite_body {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.favorite_bass {
  margin: 1em 0em 1em 1em;
}

.favorite_bass img {
  height: 120vw;
}

.favorite_data {
  text-align: left;
  margin: 1em;
}

.favorite_body_column {
  display: flex;
  flex-direction: column;
}

.favorite_keyboard {
  margin: 1em 1em 0em 1em;
}

.favorite_keyboard img {
  width: 100%;
}

.favorite_pc {
  width: 100%;
  margin-top: 1em;
}

.favorite_pc img {
  width: 95%;
}

@media screen and (min-width: 960px) {
  .favorite {
    width: 960px;
  }

  .favorite_bass img {
    height: 800px;
  }
}

.band_comment {
  width: 90vw;
  text-align: left;
  margin: 0.5em auto 0em auto;
  padding: 0.5em;
  background: #FFFAFF;
}

.bamd_member {
  width: 50vw;
  display: flex;
  flex-direction: column;
  border: solid 4px #FFCCFF;
  background: #FFFAFF;
  margin: 1em auto;
}

.band_one {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-align: left;
  margin: 0.25em 0.5em;
}

.band_part {
  width: 20%;
}

.band_name {
  width: 80%;
  margin-left: 1em;
}

.band_photo {
  width: 90vw;
  display: flex;
  flex-direction: column;
  border: solid 4px #FFCCFF;
  background: #FFFAFF;
  margin: 0px auto 1em auto;
}

.band_photo_main {
  padding: 1em 0em;
}

.band_photo_main img {
  width: 90%;
}

.band_photo_comment {
  width: 100%;
  background: #FFEEFF;
  padding: 1em 0.5em;
  box-sizing: border-box;
  text-align: left;
}

.band_is_no {
  width: 90vw;
  text-align: center;
  margin: 0px auto 1em auto;
  padding: 1em 0em;
  border: solid 4px #FFCCFF;
  background: #FFEEFF;
}

.band_audio {
  text-align: center;
  margin: 1em;
}

.band_video710480,
.band_video708480,
.band_video706480,
.band_video718480 {
  margin: 1em auto;
}

.band_video710480 video {
  width: 355px;
  height: 240px;
}

.band_video708480 video {
  width: 354px;
  height: 240px;
}

.band_video706480 video {
  width: 353px;
  height: 240px;
}

.band_video718480 video {
  width: 359px;
  height: 240px;
}

.band_video720478 video {
  width: 360px;
  height: 239px;
}

@media screen and (min-width: 960px) {

  .band_comment,
  .band_photo,
  .band_is_no {
    width: 960px;
  }

  .band_photo_main img {
    width: 680px;
  }

  .bamd_member {
    width: 250px;
  }

  .band_video710480 video {
    width: 710px;
    height: 480px;
  }

  .band_video708480 video {
    width: 708px;
    height: 480px;
  }

  .band_video706480 video {
    width: 706px;
    height: 480px;
  }

  .band_video718480 video {
    width: 718px;
    height: 480px;
  }

  .band_video720478 video {
    width: 720px;
    height: 478px;
  }
}