/* pc */
@media screen and (min-width: 751px) {
  body {
      background-image: url(stripe.png);
      background-repeat: repeat;
      background-size:100%;
      align-items: center;
      width:100%;
      overflow-x: hidden;
      font-family: "M PLUS Rounded 1c";
      box-sizing: border-box;
      margin:0;
  }

  #header-bar{
      background-color: #084591;
      top: 0px;
      width: 100%;
      height: 50px;
      position: absolute;
      z-index: 0;
  }

  #info-texts {
      padding:30px;
      margin:0;
      max-width:700px;
      text-align: left;
  }

  #album-image {
      max-width: 600px;
      padding:30px;
      width:100%;
  }

  .info-box {
      padding-top: 50px;
      padding-bottom: 50px;
      background-color: rgba(8,69,145,0.9);
  }

  .d-flex {
      margin:0 auto;
  }

  .container-fluid {
      width: 100%;
      margin: 0 auto;
      border: 0;
      padding:0;
      align-items: center;
      text-align: center;
  }

  .title{
      text-align: center;
      font-size:50px;
      font-weight:800;
  }

  .wrapper{
      display: inline-block;
      text-align: left;
  }

  /*HEAD*/
  #top {
      margin:0;
      color:#084591;
      position: absolute;
      font-weight:bold;
      bottom:75%;
      font-weight:800;
  }

  #bottom {
      background-color: #084591;
      color:White;
      padding-left: 5px;
      padding-right: 5px;
      position: relative;
      font-weight:800;
      line-height:125%;
      border-radius:3px;
  }

  #head {
      width:100%;
      right:0;
      left:0;
      margin:0 auto;
      height: 1000px;
      text-align: center;
      position: relative;
  }

  #chara_and_info {
    width:100%;
    max-width:1900px;
    margin:0 auto;
    position: relative;
  }

  #head-title {
      top: 20%;
      left: 50px;
      font-size: 50px;
      color:#003399;
      position: absolute;
      text-align: left;
      letter-spacing: 3px;
  }

  #head-info {
      top:35%;
      left:30px;
      font-size: 20px;
      font-weight:800;
      z-index:100;
      color:#003399;
      background-color:rgba( 255,255,255,0.5);
      position: absolute;
      text-align: left;
      padding:20px;
  }

  /*TRACKLIST*/
  #tracklist{
      background-color:rgba(8,69,145,0.3);
      width:100%;
      text-align: center;
      padding:50px;
      color:white;
  }

  .track-bk {
      background-color:rgba( 8,69,145, 0.2 );
      padding: 50px 100px 50px 100px;
  }

  .track-title {
      color:#084591;
      font-weight:bold;
  }

  .track-info {
      font-weight:500;
  }

  /*INFORMATION*/
  #information {
      color:white;
  }

  #info-title {
      color:white;
      z-index: 2;
      bottom:0;
      left: 0;
      right: 0;
      position: absolute;
  }
  .white-bk {
      color:#003399;
      background-color:white;
      margin-top:10px;
      margin-bottom:10px;
      border-radius:3px;
  }

  #present {
      margin:0;
      padding:0;
      border:0;
      bottom:0;
      margin-top:30px;
      background-color: rgba( 255,255,255,0.2);
  }

  #present-info {
      font-size:15px;
      padding:10px;
      font-weight:500;
  }

  #present-info-title {
      font-size:23px;
  }

  #album {
      max-width: 500px;
      padding:5px;
      object-fit: contain;
  }

  /*CREDIT*/
  #credit{
      background-color:rgba(8,69,145,0.9);
      text-align: center;
      color:white;
      padding:50px;
  }

  .credit-bk {
      padding:50px;
  }

  /*SHOP*/
  #shop {
      background-color:rgba(8,69,145,0.5);
      width:100%;
      text-align: center;
      padding:50px;
      color:white;
  }

  .shops {
      padding:30px;
  }

  .shop-title {
      font-size:20px;
      padding:5px;
  }

  /*FOOTER*/
  #footer {
      background-color: #084591;
      color:white;
      height:100%;
      text-align: center;
      padding:10px;
  }

  .cr {
      top:50%;
      margin: 0 auto;
  }

  /*IMAGES*/

  #stripe {
      max-width: 100%;
      z-index: 100;
  }

  #chara {
      width: 100%;
      height: auto;
      z-index:10000;
      object-position: 100px;
      object-fit: cover;
  }

  #stripe-b {
      top:30%;
      left:15%;
      width:25%;
      position: absolute;
  }

  #stripe-y {
      top:20%;
      left:50%;
      width:25%;
      position: absolute;
  }

  #info-bk {
      width: 100%;
      bottom: 0;
      right:0.6px;
      z-index:1;
      position: absolute;
  }

  /*FLIP*/

  .album_img {
      -webkit-perspective: 1000;
      -moz-perspective: 1000;
      perspective: 1000;
    }
      /* flip the pane when hovered */
      .album_img:hover .flipper, .album_img.hover .flipper {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }


    /* flip speed goes here */
    .flipper {
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;
      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;
      transition: 0.6s;
      transform-style: preserve-3d;
      position: relative;
    }

    /* hide back of pane during swap */
    .front{
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }

    /* front pane, placed above back */
    .front {
      z-index: 2;
    }

    .back {
      transform: scale(-1, 1);
    }

    /*Youtube*/
    #youtube-wrap {
      padding: 25px;
      max-width: 800px;
      margin:0 auto;
    }

    .youtube {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
    }
    .youtube iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
    }

  }

/* smartPhone */
@media (max-width: 750px) {
  body {
      background-image: url(stripe.png);
      background-repeat: repeat;
      background-size:100%;
      align-items: center;
      width:100%;
      position:relative;
      overflow-x: hidden;
      font-family: "M PLUS Rounded 1c";
      box-sizing: border-box;
      margin:0;
  }

  h3 {
      font-size: 40px;
  }

  p {
      font-size: 20px;
  }

  #header-bar{
      background-color: #084591;
      top: 0px;
      width: 100%;
      height: 50px;
      position: absolute;
      z-index:-100;
  }

  #info-texts {
      padding:30px;
      margin:0;
      max-width:700px;
      text-align: left;
  }

  #album-image {
      max-width: 600px;
      padding:30px;
      width:100%;
  }

  .info-box {
      padding-top: 20px;
      padding-bottom: 50px;
  }

  .d-flex {
      margin:0 auto;
  }

  .container-fluid {
      width: 100%;
      margin: 0 auto;
      border: 0;
      padding:0;
      align-items: center;
      text-align: center;
  }

  .title{
      text-align: center;
      font-size:40px;
      font-weight:800;
  }

  .wrapper{
      display: inline-block;
      text-align: left;
  }

  /*HEAD*/
  #top {
      margin:0;
      color:#084591;
      position: absolute;
      font-weight:bold;
      bottom:75%;
      font-size:50px;
      font-weight:800;
  }

  #bottom {
      background-color: #084591;
      color:White;
      padding-left: 5px;
      padding-right: 5px;
      position: relative;
      font-size:50px;
      font-weight:800;
      line-height:125%;
      border-radius:3px;
  }

  #head {
      width:100%;
      height:770px;
      text-align: center;
      position: relative;
  }

  #head-title {
      top:55%;
      left:15%;
      font-size: 50px;
      color:#003399;
      position: absolute;
      text-align: left;
      letter-spacing: 3px;
  }

  #head-info {
      top:65%;
      left:15%;
      position: absolute;
      font-size: 20px;
      font-weight:800;
      color:#003399;
      background-color:rgba( 255,255,255,0.5);
      text-align: left;
      padding:20px;
  }

  /*TRACKLIST*/
  #tracklist{
      background-color:rgba(8,69,145,0.3);
      width:100%;
      text-align: center;
      padding:50px;
      color:white;
  }

  .track-bk {
      background-color:rgba( 8,69,145, 0.2 );
      padding: 50px 20px 50px 20px;
  }

  .track-title {
      color:#084591;
      font-weight:bold;
  }

  .track-info {
      font-weight:500;
      font-size: 20px;
  }

  /*INFORMATION*/
  #information > div{
      color:white;
      background-color: rgba(8,69,145,0.9);
  }

  #info-title {
      color:white;
      z-index: 2;
      bottom:0;
      left: 0;
      right: 0;
      position: absolute;
  }
  .white-bk {
      color:#003399;
      background-color:white;
      margin-top:10px;
      margin-bottom:10px;
      border-radius:3px;
  }

  #present {
      margin:0;
      padding:0;
      border:0;
      bottom:0;
      margin-top:30px;
      background-color: rgba( 255,255,255,0.2);
  }

  #present-info {
      font-size:15px;
      padding:10px;
      font-weight:500;
  }

  #present-info-title {
      font-size:23px;
  }

  #album {
      max-width: 500px;
      padding:5px;
      object-fit: contain;
  }

  /*CREDIT*/
  #credit{
      background-color:rgba(8,69,145,0.9);
      text-align: center;
      color:white;
      padding:50px;
  }

  .credit-bk {
      padding:50px;
  }

  .credit-info {
      font-size: 20px;
  }

  /*SHOP*/
  #shop {
      background-color:rgba(8,69,145,0.5);
      width:100%;
      text-align: center;
      padding:50px;
      color:white;
  }
  .shop-img {
      width: 400px;
  }

  .shops {
      padding:30px;
  }

  .shop-title {
      font-size:30px;
      padding:5px;
  }

  /*FOOTER*/
  #footer {
      background-color: #084591;
      color:white;
      height:100%;
      text-align: center;
      padding:10px;
  }

  .cr {
      top:50%;
      margin: 0 auto;
  }

  /*IMAGES*/

  #stripe {
      max-width: 100%;
      z-index: 100;
  }

  #chara {
      width: 100%;
      height: auto;
      z-index:-50;
      object-position: 0px;
      object-fit: cover;
  }

  #stripe-b {
      display:none;
  }

  #stripe-y {
      display:none;
  }

  #info-bk {
      width: 100%;
      bottom:-0.8px;
      right:0.6px;
      z-index:1;
      position: absolute;
  }

  /*FLIP*/

  .album_img {
      -webkit-perspective: 1000;
      -moz-perspective: 1000;
      perspective: 1000;
    }
      /* flip the pane when hovered */
      .album_img:hover .flipper, .album_img.hover .flipper {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }


    /* flip speed goes here */
    .flipper {
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;
      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;
      transition: 0.6s;
      transform-style: preserve-3d;

      position: relative;
    }

    /* hide back of pane during swap */
    .front{
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;

      position: absolute;
      top: 0;
      left: 0;
    }

    /* front pane, placed above back */
    .front {
      z-index: 2;
    }

    .back {
      transform: scale(-1, 1);
    }

    /*Youtube*/
    #youtube-wrap {
      padding: 25px;
      max-width: 800px;
      margin:0 auto;
    }

    .youtube {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
    }
    .youtube iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
    }

  }