.btn-pink {
  background-color:rgb(255,123,172);
  color: white;
}
.btn-pink:hover {
  background-color:rgb(253, 85, 147);
  color: #ffffff;
}
a.link-color-pink {
  color: rgb(253, 171, 223) !important;
}
#navArea {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 10px; /* 適切な余白を追加 */
  background-color: transparent; /* 完全に透明な背景 */
  position: fixed; /* 動画の上に重ねるために位置を調整 */
  width: 100%; /* 横幅を全体にする */
  z-index: 10;
  max-width: 100%;
}

.header {
  display: flex;
  align-items: center;
}

.site-name {
  font-family: "Allison", cursive;
  font-size: 5rem;
  margin-right: 20px;
}
.site-name a{
  color: rgb(255,123,172);
}

.language-switch {
  margin-right: 20px;
}
nav {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
  /* transition: left 0.6s ease; */
}

.open nav {
  left: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  position: relative;
  margin: 0;
}
nav ul li a {
  display: block;
  color: #d4c052;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav ul li a:hover {
  transform: scale(1.2);
  color: rgb(175, 171, 40);
}

.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 30;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #e6d8b3;
  border-radius: 4px;
  transition: all .5s;
}

.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #4d4d4d;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}

#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
}

#navArea ul li {
  opacity: 0;
  transform: translateY(25px); /* 少し下に移動した状態 */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#navArea.open ul li {
  opacity: 1;
  transform: translateY(0);
}

#navArea.open ul li:nth-child(1) {
  transition-delay: 0.7s;
}
#navArea.open ul li:nth-child(2) {
  transition-delay: 0.2s;
}
#navArea.open ul li:nth-child(3) {
  transition-delay: 0.3s;
}
#navArea.open ul li:nth-child(4) {
  transition-delay: 0.4s;
}
#navArea.open ul li:nth-child(5) {
  transition-delay: 0.5s;
}
#navArea.open ul li:nth-child(6) {
  transition-delay: 0.6s;
}

/* ブランドアニメーション */
.site-name:hover #site-logo,
.site-name:hover #site-name-text {
  animation: heartbeat 1.2s infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

#site-logo {
  display: none;
}

#site-name-text {
  display: inline-block;
}


/* 768px以下の幅のときに画像を表示、テキストを非表示 */
@media screen and (max-width: 768px) {
  #site-logo {
    display: inline-block;
    width: 40px;
    margin-top: -20px;
  }

  #site-name-text {
    display: none;
  }
}
.terms-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

.terms-content {
  font-size: 14px;
  line-height: 1.5;
}
.date{
  background: #ddd;
  color: #222;
  width: 11rem;
  min-width: 11rem;
  height: 100%;
}

.year{
  font-weight: 600;
  padding: 5px;
  font-size: 16px;
}

.day{
  font-size: 42px;
  font-weight: 600;
  margin: 0 5px;
}

.sat {background-color: #11a;}
.sun {background-color: #a11;}
.common {background-color: #444;}

.day-of-the-week{
  font-size: 10px;
  text-align: center;
  color: #ddd;
}

.schedule-box{
  padding: 5px 10px;
}

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.image-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0));
  transform: rotate(25deg);
  transition: all 0.3s ease;
  pointer-events: none;
}

.image-container:hover::before {
  left: 100%;
  transition: all 0.6s ease;
}
.image-overlay {
  position: relative;
  overflow: hidden; /* 画像がはみ出さないように */
}

.image-overlay img {
  width: 100%; /* 画像がコンテナにフィットするように */
  transition: transform 0.5s ease; /* ズーム効果のトランジション */
}

.image-overlay:hover img {
  transform: scale(1.1); /* ズーム効果 */
}

.image-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* 右上から左下に向かうグラデーション */
  opacity: 0; /* 初期は透明 */
  transition: opacity 0.5s ease; /* アニメーションのトランジション */
}

.image-overlay:hover::after {
  opacity: 1; /* マウスオーバーでオーバーレイを表示 */
}

.livehouse{
  background: rgb(174, 34, 34);
  color: #ddd;
}

.concert{
  background: rgb(13, 82, 13);
  color: #ddd;
}

.studio{
  background: rgb(14, 55, 88);
  color: "ddd";
}
.shop-header {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width:100%;
}

.video-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(black 1px, transparent 1px);
  background-size: 5px 5px; /* ドットのサイズと間隔 */
  pointer-events: none; /* ドットが他の要素の上にあってもクリックできるようにする */
  opacity: 0.3; /* ドットの透明度 */
  z-index: 2; /* 動画の上に表示 */
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 3;
}

.text-box h1 {
  font-size: clamp(1rem, calc(1rem + 4.5vw), 100rem);
  line-height: 1.2;
  padding: 0 50px;
  text-align: center;
  color: rgb(255, 255, 255);
  font-weight: 400;
  font-style: normal;
  padding: 20px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 /* 
  ・全体のレイアウト
  ・震えるページアップレイアウト
  ・
 */
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden; /* 横スクロール防止 */
  max-width: 100%;
}

body {
  font-family: "MS Ｐ明朝", "MS 明朝", serif;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  color: #ddd;
  word-break: break-all;
  background-color: #111;
  font-size: 1.5rem;
}

html {
  font-size: 62.5%;
}

h1{
  font-size: calc(1.325rem + .9vw);
}

.font-heading {
  word-break: break-all;
  font-size: clamp(1.6rem, calc(1.5rem + 1vw), 2.0rem);
}

.text-truncate {
  width: 100%;
  max-width: 100%; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-text-wrap{
  display: -webkit-box;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 表示行数 */
  overflow: hidden; /* はみ出した部分を非表示 */
  max-height: 4.5em; /* 必要に応じて調整 */
  font-size: clamp(0.9rem, calc(0.6rem + 1vw), 1.2rem);
  white-space: pre-wrap;
}

.white-space{
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

a {
  text-decoration: none;
  color: #dcdcdc;
  padding: 5px 10px; /* リンクを少し大きく見せるためにパディングを追加 */
  display: inline-block; /* transform を適用するために必要 */
  transition: transform 0.3s ease, color 0.3s ease; /* 滑らかに拡大する */
}

a:hover {
  transform: scale(1.2); 
  color: rgb(224, 132, 166);
}

/* Google Map */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 65%;
}
 
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 震えるアニメーション */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 1000;
}

.back-to-top img {
  width: 50px;
  height: 50px;
}

/* 振動アニメーション */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* マウスオーバー時に振動 */
.back-to-top:hover {
  animation: shake 0.5s; /* 0.5秒の振動アニメーション */
  animation-iteration-count: infinite; /* 無限ループで震える */
}
/* END 震えるアニメーション */


/* メンバー表示領域 */
.members-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.members-container {
  justify-content: center; /* コンテンツを中央揃え */
  align-items: center;
}

.member-item {
  text-align: center;
}

.member-item img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

h2#members {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
/*  END メンバー表示領域 */


.information{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-info {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-link {
  margin-left: 10px;
  flex-shrink: 0;
}

.information a{
  color: #aaa;
}

.information a:hover{
  transform: scale(1.2); 
  color: rgb(255,123,172);
}

.information > .row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: #999;
}

.inquiry {
  display: flex;
  justify-content: center;  /* 水平方向の中央揃え */
  align-items: center;      /* 垂直方向の中央揃え */
  height: 100vh;            /* ビューポートの高さを100%に */
}

.inquiry-form {
  width: 100%;
  max-width: 700px; /* 最大幅を指定 */
  padding: 20px;
}

/* Aboutページ*/
.about {
  display: flex;
  justify-content: center; /* 水平方向中央寄せ */
  align-items: center; /* 垂直方向中央寄せ */
  height: 100vh; /* ビューポートの高さ */
  padding: 20px; /* 画面の端からの余白 */
  box-sizing: border-box; /* paddingを含む */
}

.about-content {
  text-align: center;
  max-width: 80%; /* 説明文の幅を制限 */
  max-height: 80%; /* コンテンツ全体の高さを制限 */
  overflow-y: auto; /* 高さが超えるときにスクロール */
}

h2 {
  margin-bottom: 20px; /* 見出しと本文の間隔 */
}

.about-text {
  white-space: pre-wrap; /* 改行を反映させる */
  line-height: 1.6;
}


/* フォームの入力必須欄 */
input:invalid {
  border-color: red;
}

input:required:valid {
  border-color: green;
}

.error-message {
  color: red;
  display: none;
}

input:invalid + .error-message {
  display: block;
}

/* TOP動画エリア  */
.thumbnail-container {
  position: relative;
  padding-bottom: 56.25%;
  height: auto;
  background-color: #000;
}

.thumbnail-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  pointer-events: none;
  opacity: 0.8;
}

.thumbnail-link {
  display: block;
  text-decoration: none;
}

/* 動画詳細ページ */
/* 動画コンテナにアスペクト比を適用 */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 (9/16 = 0.5625) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}