@charset "UTF-8";
/* CSS Document */

header{
  text-align: center;
  color:white;
  font-size:2rem;
}


body{
  margin:0 auto;
  padding: 0;
  background-color: black;
  width:100%;
}

a {
  all: unset;
}


img{
  text-align: center;
  margin:0 auto;
  align-items: center;
  width:100%;
}

.botan{width: 30%;}

h1,h2{
  margin:0 auto;
}

h2{margin-top:4rem;}

.sp-main{
display:none;
}

.ticket{
  margin:30px auto 30px auto;
}

.ticket_link{
  color:#c9b19c!important;
  font-size:1.5rem;
  padding:0;
  text-decoration:underline;
}

.ticket_link:hover{
  opacity:0.6;
}

  .zen-old-mincho-regular {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: unset;
    margin-bottom:unset;
  }

.mr-de-haviland-regular {
  font-family: "Mr De Haviland", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 5rem;
  color:white;
  text-align: center;
}

  p{
    text-align: center;
    color:#c9b19c;
    font-size: 2rem;
  }

.dis{
    text-align: center;
    color:#c9b19c;
    font-size: 1rem;
  }

  .video-title{
      text-align:center;
      color:white;
      font-size: 1.2rem;
      margin-bottom: 3rem;
    }

.price{font-size: 1.2rem;}
.kome{font-size: 1rem;}

  .video-box{
    width: 100%;
  }

  .box {
    width:80%;
    margin:8px auto;
    display:flex;
    justify-content:space-around;
    flex-flow:row wrap;
  }

.box img {
  width:23%;
  margin:16px 0;
}

iframe{
  display: block;
  margin: 0 auto;
  padding: 1.5rem 0 0 0;
  width: 80%;
  aspect-ratio: 16 / 9;
}

.white{
  color:white;
  text-align: center;
  font-size:1rem;
}

.produced{
  margin-top: 60px;
}

.text a{
  color: #000;
  text-decoration: none;
}

/*a hover*/
.text {
  position: relative;
  padding: 0 10px; /* 見た目調整用の余白 */
  color: #fff;
  font-size: 1rem;
}

.text::before {
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  content: "";
  color: #fff;
  background-color: #612235;
  mix-blend-mode: difference; /* difference（差分） */
  transition: 0.3s;
}

.text:hover::before {
  width: 100%;
}
/*a hover*/


/* SNSボタン全体 */
.sns-button {
  margin: 3px;
  padding: 0px;
  text-align: center;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
.sns-button a {
  text-decoration: none;
}


/* 各 SNS ボタンのボックス */
.sns-button li  {
  display: inline-block;
  margin: 5px;
  padding: 0px 0px;
  border-radius: 6px;
  width: 60px;
  height: 60px;
  line-height: 60px;
}

/* アイコン */
.sns-button i {
  text-align:center;
  font-size: 45px;
  margin: 0px;
  padding: 8px 0px 0px 0px;
  color: #fff;
}

/* アイコンホバー */
.sns-button li:hover{
  opacity: 0.8;
}


/* ボタンの色 */
.button_line      { background: #6cc755; }

.shuns_sns a{color:white;}

footer{
  color:white;
  text-align: center;
}

/* ▼ スマホ用 ▼ */
@media screen and (max-width: 480px) {
  header{
    text-align: center;
    color:white;
       }

  body {
    margin-left:0;
    padding: 0;
    background-color: black;
    width:100%;
  }

  img{
    text-align: center;
    margin:0 auto;
    align-items: center;
    width:100%;
  }

  .botan{width: 70%;}

.pc-main{
display:none;
}

.sp-main{
display:block;
}

.box img {
  width:46%;
}

.video-title{
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }

.mr-de-haviland-regular {
  font-family: "Mr De Haviland", cursive;
  font-size: 3.5rem;
}

p{
  font-size: 1.5rem;
}

.artist_setsumei{
  width:80%;
  margin: 0 auto;
}

.dis{
    font-size: 0.9rem;
  }


  .text {
    font-size: 0.9rem;
  }

  .ticket_link{
    font-size:1.3rem;
  }

  .price{font-size: 1.1rem !important;}
  .kome{font-size: 0.9rem !important;}


  .produced{
    width: 80%;
    margin: 0 auto;
  }

  .white{
    font-size:0.9rem;
  }


  footer{
    font-size: 0.8rem
  }
}
/* ▲ スマホ用 ▲ */