html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1vw;
  font: inherit;
  vertical-align: baseline; }

body {
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  color: #fff;
  overflow-x: hidden;
  background: #141e3e; }

h2 {
  color: #eacd3e;
  letter-spacing: 3px;
  font-size: xx-large;
  font-weight: 900;
  font-family: 'Raleway', sans-self; }

.accent {
  color: #ece2b7;
  font-size: medium; }

.gray {
  color: #828282; }

.yellow {
  color: #eacd3e; }

.license {
  font-size: medium; }

a {
  text-decoration: none; }

header {
  position: relative;
  width: 100%;
  min-height: 98px;
  height: 98px;
  background: linear-gradient(to bottom right, #abddf7, #c495c2);
  box-shadow: 2px 2px 8px rgba(239, 130, 104, 0.5);
  font-size: x-large;
  letter-spacing: 3px; }
  header h1 {
    width: 100%;
    text-align: center;
    color: white;
    line-height: 98px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: xx-large;
    font-weight: bold;
    font-style: italic;
    letter-spacing: normal; }
  @media screen and (max-width: 769px) {
    header {
      display: none; } }

.intro {
  width: 90%;
  position: relative;
  height: 900px;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  background-image: url("../img/main.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  .intro .logo-group-a {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 8%; }
    .intro .logo-group-a img.logo1 {
      width: 99%; }
  @media screen and (max-width: 769px) {
    .intro {
      width: 140vw;
      height: 820px;
      background-image: url("../img/main_sp.png"); }
      .intro .logo-group-a {
        overflow: hidden;
        width: 140vw;
        bottom: 33vh;
        left: -21vw;
        transform: rotate(-30deg); }
        .intro .logo-group-a img.logo1 {
          width: 140vw; } }

section {
  position: relative;
  width: 100%;
  margin: 0 auto; }
  @media screen and (max-width: 769px) {
    section {
      margin: 0 auto; } }

section.s1 {
  width: 85%;
  padding: 80px 0; }
  section.s1 .information {
    display: flex;
    align-items: flex-start; }
    section.s1 .information .jacket {
      display: flex;
      flex-basis: 35%;
      align-items: baseline;
      flex-direction: column;
      justify-content: center; }
      section.s1 .information .jacket a {
        color: #eacd3e; }
    section.s1 .information img.jacket-image {
      width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 4px rgba(234, 205, 62, 0.75)); }
    section.s1 .information .text {
      flex-basis: 65%;
      width: 100%;
      padding-left: 35px;
      font-family: "Raleway", sans-serif;
      font-weight: 900; }
      section.s1 .information .text .event {
        font-size: 24px; }
      section.s1 .information .text .date {
        font-size: 115px; }
        section.s1 .information .text .date .mon {
          font-size: 24px; }
      section.s1 .information .text .space {
        text-align: right;
        font-size: xx-large; }
      section.s1 .information .text .description {
        margin-top: 20px;
        color: #141e3e;
        background: linear-gradient(to bottom right, #abddf7, #c495c2);
        text-align: right;
        font-family: sans-serif;
        font-weight: 400;
        padding: 6px; }
      section.s1 .information .text .price {
        margin-top: 40px;
        background: linear-gradient(-120deg, #abddf7, #c495c2);
        text-align: right;
        padding: 8px 12px 8px 8px;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 1px;
        line-height: 27px;
        font-size: x-large;
        color: #141e3e; }
      section.s1 .information .text .description-sp {
        display: none;
        color: #141e3e;
        background: linear-gradient(to bottom right, #abddf7, #c495c2);
        text-align: right;
        font-family: sans-serif;
        font-weight: 400;
        padding: 6px; }
      section.s1 .information .text .price-sp {
        display: none;
        background: linear-gradient(-120deg, #abddf7, #c495c2);
        text-align: right;
        padding: 8px 12px 8px 8px;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 1px;
        line-height: 27px;
        font-size: x-large;
        color: #141e3e; }
  @media screen and (max-width: 769px) {
    section.s1 {
      padding: 40px 0; }
      section.s1 .information {
        flex-wrap: wrap; }
        section.s1 .information .jacket {
          flex-basis: 100%; }
        section.s1 .information .text {
          flex-basis: 100%;
          margin-top: 20px;
          padding: 0; }
          section.s1 .information .text .event {
            font-size: medium; }
          section.s1 .information .text .date {
            font-size: -webkit-xxx-large; }
            section.s1 .information .text .date .mon {
              font-size: small; }
          section.s1 .information .text .space {
            font-size: large; }
          section.s1 .information .text .description {
            display: none; }
          section.s1 .information .text .price {
            display: none; }
          section.s1 .information .text .description-sp {
            display: block;
            margin-top: 20px;
            text-align: center;
            line-height: 26px; }
          section.s1 .information .text .price-sp {
            display: block;
            text-align: center;
            font-size: large;
            margin-top: 20px; }
      section.s1 .buy {
        width: 100%;
        justify-content: space-around; }
        section.s1 .buy a.shop {
          width: 75%;
          margin: 5px 3px; } }

section.s2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  width: 90%; }
  section.s2 .track-box {
    flex-basis: 65%;
    width: 100%;
    padding-left: 35px; }
  section.s2 .preview {
    padding-top: 20px;
    width: 100%; }
  section.s2 .youtube {
    margin-bottom: 25px; }
  section.s2 .soundcloud {
    width: 100%; }
  section.s2 .tracklist {
    letter-spacing: 1px;
    font-size: 26px; }
    section.s2 .tracklist table {
      display: block; }
      section.s2 .tracklist table tr {
        margin-bottom: 10px; }
      section.s2 .tracklist table td.right {
        padding-left: 50px;
        padding-bottom: 24px; }
    section.s2 .tracklist .num {
      position: relative;
      min-width: 48px;
      min-height: 48px;
      line-height: 48px;
      text-align: center;
      font-family: "Raleway", sans-serif;
      font-weight: 900;
      background: #ece2b7;
      color: #141e3e;
      transform: rotate(-45deg); }
    section.s2 .tracklist .number {
      display: block;
      transform: rotate(45deg); }
    section.s2 .tracklist .sp-list {
      display: none; }
  section.s2 .staff {
    width: 100%;
    flex-basis: 35%; }
    section.s2 .staff p {
      line-height: 34px;
      font-size: large; }
    section.s2 .staff a {
      color: white; }
    section.s2 .staff .name {
      margin-top: 3px; }
  @media screen and (max-width: 769px) {
    section.s2 {
      flex-wrap: wrap;
      flex-direction: column; }
      section.s2 .track-box {
        padding: 0; }
      section.s2 .preview {
        width: 100%; }
      section.s2 .jacket {
        display: flex;
        width: 100%; }
      section.s2 .staff {
        margin-top: 20px; }
      section.s2 .staff p {
        line-height: 26px; }
      section.s2 .tracklist {
        width: 100%; }
        section.s2 .tracklist table {
          display: none; }
        section.s2 .tracklist .sp-list {
          display: block; }
        section.s2 .tracklist p {
          justify-content: center; }
        section.s2 .tracklist .num {
          display: block;
          margin: 0 auto;
          width: 48px; }
        section.s2 .tracklist .title {
          text-align: center;
          font-size: x-large;
          margin: 15px 0 0 0; }
        section.s2 .tracklist .accent {
          text-align: center;
          margin-bottom: 3vh; } }

section.s3 {
  width: 90%;
  padding: 80px 0; }
  section.s3 hr {
    background: white;
    height: 1px;
    width: 100%;
    border: none;
    margin-bottom: 80px; }
  section.s3 .buy {
    width: 100%;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    section.s3 .buy a.shop {
      width: 26%;
      margin: 10px 10px;
      padding: 30px 20px;
      background: white;
      border-radius: 10px;
      font-size: x-large;
      letter-spacing: 2px;
      text-align: center;
      color: #eacd3e; }
  @media screen and (max-width: 769px) {
    section.s3 {
      padding: 30px 0; }
      section.s3 hr {
        margin-bottom: 30px; }
      section.s3 .buy {
        margin: 10px auto;
        justify-content: space-between; }
        section.s3 .buy a.shop {
          width: 100%;
          margin: 10px 0; }
        section.s3 .buy a.none {
          display: none; } }

section.s4 {
  padding: 30px 0;
  text-align: center; }
  section.s4 .banner {
    width: 40%;
    margin-top: 25px; }
  @media screen and (max-width: 769px) {
    section.s4 h2 {
      font-size: x-large;
      letter-spacing: 2px; }
    section.s4 .banner {
      width: 80vw; } }

footer {
  display: flex;
  position: relative;
  width: 99%;
  text-align: center;
  height: 220px;
  color: #7f7f7f;
  justify-content: flex-end;
  align-items: center; }
  footer .twitter {
    margin-right: 10px; }
  footer p {
    font-size: large; }
  @media screen and (max-width: 768px) {
    footer {
      width: 100%;
      height: 100px;
      margin-top: 0px;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      justify-content: center; }
      footer .twitter {
        margin: 10px 0; }
      footer p {
        font-size: medium; } }