@charset "UTF-8";

/* html {
  font-size:62.5%;
}
body {
  font-size:1.4rem;
}
*, *::before, *::after {
  box-sizing:border-box;
}
.clearfix::after {
  content:'';
  display:block;
  clear:both;
} */



/* *****************************************************************
********************************************************************

共通設定

********************************************************************
****************************************************************** */
body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}



/*  */
main{
  margin: 0;
  text-align: center;
  /* border-left: #333 solid 5px;
  border-right: #333 solid 5px;
  border-bottom: #333 solid 5px; */

}


h2{
  font-size: 30px;
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  font-weight: 800;
  padding: 10%;
}

h3{
  font-size: 25px;
  line-height: 1.5; /* 1行の高さを1.5倍に設定 */
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  font-weight: 700;
  padding: 5%;
}
/* h3.kazari{
  position: relative;
  display: inline-block;
}
h3.kazari:before, h3.kazari:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
h3.kazari:before {
  left:0;
}
h3.kazari:after {
  right: 0;
} */


h5{
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 700;
}



p{
  font-size: 16px;
  line-height: 2; /* 1行の高さを1.5倍に設定 */
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  padding:10%;
}
.center-txt{
  text-align: center;
}



/* ご予約ボタン */
h4{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
}
.btn,.r-btn{
  display: inline-block;
  padding: 5%;
  margin-bottom: 10%;
  background-color: #fafafa;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
}

.btn:hover,
a.btn:hover {
  color: #130602;
  background:#fafafa;
  transition: all 0.3s ease;
}

.btn:hover,
a.btn:hover {
  color: #130602;
  background:#fafafa;
  transition: all 0.3s ease;
}

.p-pc{
  display: block;
}
.p-sp{
  display: none;
}
.br-pc{
  display: block;
}
.br-sp{
  display: none;
}
/* *******************************
**********************************

nav

**********************************
******************************** */

.openbtn {
  display: none;
}
.logo-sp{
  display: none;
}


.nav-pc {
  display: flex;
  background-color: #130602;
  justify-content: space-between; /* 横方向の均等配置 */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 0 20px; /* nav 全体の左右の余白 */
  position: fixed;
  z-index: 999;
  width: 100%;
}

/*  */
.nav-pc ul {
  display: flex;
  white-space: nowrap;
  padding-left: 0; /* ul のデフォルトの余白をリセット */
  margin: 0;
}

.nav-pc li {
  padding-left: 20px;
  font-size: 13px;
  white-space: nowrap;
  margin-top: 0; /* 修正: 上方向の余白をリセット */
  list-style: none; /* li のデフォルトのリストスタイルをリセット */
}

.nav-pc div {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
}

/* nav-文字 */
.nav-pc a {
  color: #fafafa;
  text-decoration: none; /* 下線を除去 */
  font-size: 14px;
}

.nav-pc img {
  width: 150px;
  height: auto;
}

/* btn */
.btn {
  /* padding: 10px 20px; */
  background-color: rgb(247, 234, 135);
  margin: 20px 0 20px 20px;
  white-space: nowrap;
}

.btn {
  color: #333;
  text-decoration: none; /* 下線を除去 */
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top:-120%;
  left:0;
  width:100%;
  height: 100vh;/*ナビの高さ*/
  background-color: #130602;
  /*動き*/
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
  text-align: center;
}

#g-nav li a{
color: #fafafa;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
font-size: 14px;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
top:10px;
right: 10px;
cursor: pointer;
  width: 50px;
  height:50px;
}

/*×に変化*/
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background-color: #666;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
top:15px;
}

.openbtn span:nth-of-type(2) {
top:23px;
}

.openbtn span:nth-of-type(3) {
top:31px;
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}


/* *******************************
**********************************

top

**********************************
******************************** */
.top h1 img{
  width: 30%;
  height: auto;
  margin: 15%;
}
.top{
  display: block;
}
.top img{
  width: 80%;
}


/* *******************************
**********************************

レコーディングサービス

**********************************
******************************** */
.recording{
  background-color:  #f9f5ef;
  margin: 0 auto 0;
  width: 80%;
}

.rec-box {
  background-color: #fafafa;
  padding: 10%;
  display: inline-block;
  /* border: #333 2px solid; */
}
.rec-box h3{
  margin: 0 0 10%;
  padding: 0;
}

.rec-box h5{
  font-size: 16px;
  padding: 5% 0 0;
}
.rec-box-warp p{
  padding: 10% 0 2%;

}

.h6-bold{
  font-size: 25px;
  font-weight: 700;
  /* border-bottom: #ea6868 10px solid; */
  display: inline-block;
  padding:5% 0 0 ;
}
/* ボタン */
.r-btn{
  font-size: 17px;
  padding: 2% 20%;
  color: #fafafa;
  background:#130602;
}
.r-btn:hover,
a.r-btn:hover {
  background: #fafafa;
  color:#130602;
  transition: all 0.3s ease;
  border: #130602 1px solid;
}
.gori{
  width: 70%;
  height: auto;
}

/* *******************************
**********************************

レンタル

**********************************
******************************** */
.rental{
  background-color:  #f9f5ef;
  margin: 5% auto 0;
  width: 80%;
  padding-bottom: 10%;
}

.r-box {
  background-color: #fafafa;
  padding: 10%;
  display: inline-block;
  /* border: #333 2px solid; */
}
.r-box h3{
  margin: 0 0 10%;
  padding: 0;
}

.r-box h5{
  font-size: 16px;
  padding: 5% 0 0;
}
.r-box-warp p{
  padding: 10% 0 2%;


}

/* *******************************
**********************************

料金

**********************************
******************************** */
.ryokin{
  margin: 5% auto 0;
  /* background-color: yellowgreen; */
  margin-bottom: 10%;
  width: 60%;
}
.ryokin p{
  text-align: left;
  display: inline-block;
}

/* *******************************
**********************************

会場ご案内

**********************************
******************************** */
.access h2{
  padding:10% 0 0;
}

/* *******************************
**********************************

設備機材

**********************************
******************************** */
.setubi{
  padding-top: 10%;
}


.option {
    display: flex;
    justify-content: center;
    text-align: center; /* テキストを中央揃えにするためにも追加 */
    width: 100%; /* 必要に応じて親要素の幅を指定 */
}

.option-table {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    width: 80%; /* .optionの幅に対して指定した幅 */
    justify-content: center; /* 子要素を中央揃えにする */
}



/*日付(dt)、記事(dd)共通設定*/
.option dt,
.option dd {
	padding: 20px 0;
	border-bottom:1px solid rgb(175, 175, 175);		/*上下、左右へのボックス内の余白*/
  font-size: 16px;
}

/*日付(dt)設定*/
.option dt {
	width: 50%;	/*幅。8文字(em)分*/
	text-align: center;
}


/*記事(dd)設定*/
.option dd {
	width: 50%;	/*「8em」は上の「.new dt」のwidthの値です*/
	text-align: center;
}
.option{
	padding-bottom: 15%;
}



/* *******************************
**********************************

ご予約お問い合わせ

**********************************
******************************** */
.reserv h2{
  padding-bottom: 5%;
  color: #fafafa;
}
.reserv p{
  padding: 5%;
  color: #fafafa;
}
.reserv .h6-bold{
  padding:0;
  margin-bottom: 5%;
  border: 0;
  color: #fafafa;
}
.reserv{
  padding: 0 0 20%;
  background-color: #130602;
  background-image: url('../img/35%.PNG');
  background-size: cover; /* 画像を要素全体に拡大・縮小してフィットさせる */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
  background-attachment: fixed; /* 背景画像を固定 */
}
/* *******************************
**********************************

footer

**********************************
******************************** */
footer{
  padding: 10% 0 0;
  background-color: #130602;
}
footer img{
  width: 20%;
  height: auto;
}
footer .f-box{
  display: flex;
  justify-content: center;
}
footer .f-box a{
  padding: 5%;
  color: #f0f0f0;
}
footer p{
  padding: 5% 0 2%;
  color: #f0f0f0;
  font-size: 11px;
}
footer h5{
  margin:5%;
  color: #f0f0f0;
  font-weight: 400;
}
/* *******************************
**********************************

スライドショー

**********************************
******************************** */

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
  background:url(../img/1.jpg);
}

.slider-item02 {
  background:url(../img/2.jpg);
}

.slider-item03 {
  background:url(../img/3.jpg);
}

.slider-item04 {
  background:url(../img/07.jpg);
}

.slider-item05 {
  background:url(../img/04.jpg);
}

.slider-item06 {
  background:url(../img/10.jpg);
}

.slider-item {
  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
z-index: 3;
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc;/*矢印の色*/
  border-right: 2px solid #ccc;/*矢印の色*/
  height: 25px;
  width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left:2.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right:2.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
position: relative;
z-index: 3;
  text-align:center;
margin:-50px 0 0 0;
}

.slick-dots li {
  display:inline-block;
margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}

/* *******************************
**********************************

ふわっと

**********************************
******************************** */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes fadeUpAnime{
from {
  opacity: 0;
  transform: translateY(100px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}


/* *******************************
**********************************

スケジュール

**********************************
******************************** */
.s-title{
  width: auto;
  height: 50%;
  background-image: url(../img/06.jpg);
  position: relative;
  overflow: hidden; /* はみ出る部分を隠す */
}
.s-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('your-image.jpg'); /* ここに画像のパスを指定 */
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  filter: blur(8px); /* 背景画像をぼかす */
  z-index: 1; /* 背景を後ろに配置 */
}

.live-h4{
  font-size: large;
}
.s-title h2{
  padding-top: 15%;
  color: #fafafa;

  position: relative;
  z-index: 2; /* コンテンツを前面に配置 */
  background-color: rgba(0, 0, 0, 0.5); /* 背景の透明度を設定 */
}

/* 月 */

.manth-title-wrap{
  position: relative;/*相対配置*/
}
.manth-title{
  font-size: 30px;
  /* padding: 10% 0 0; */
  top: 50%;
  left: 50%;
  position: absolute;/*絶対配置*/
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  font-style:italic ;
font-family:serif;
  color: #554437;
}


.manth-title-wrap img{
  width: 40%;
}

.day{
  text-align: left;
  margin-bottom: 17%;
}
.day dl{
  padding: 0 10% ;
}
.day-com{
  margin: 5% 5% 10%;
  border: #9a9a9a 1px solid;
  border-radius: 20px;
  padding: 5%;
}
.day dt{
  font-size: 20px;
  margin: 15% 0% 5%;
  background-color: #f9f5ef;
  padding: 5%;
}
.day dd{
  font-size: 15px;
  line-height: 2; /* 1行の高さを1.5倍に設定 */
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  padding: 0 5% ;
  /* border-bottom: #000 1px solid; */
}


.s-01{
  margin: 0;
  padding:0;
}
.s-02{
  margin: 3% 0 0 0;
  padding:0;
  font-size: 22px;
  font-weight: 700;
}
.s-03{
  margin: 0;
  padding:0;
  border-bottom: #000 1px solid;
}
.s-04{
  margin: 0;
  padding:0;
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
}

.artist{
  margin: 0;
  padding:0;
  font-size: 18px;
}
.stelist{
  margin: 0;
  padding:0;
}
.s-main{
  /* background-color: #ccc; */
  margin: 10%;
}

/* *******************************
**********************************

Next-Live

**********************************
******************************** */

.next{
  /* border: #000 5px solid; */
  margin-bottom: 25%;
  /* background-color: #322717; */
}
.next .day dl dt{
  /* border: #000 1px solid; */
  background-color: #f0d6ce;
  /* background-position: center;
  background-size: cover;
background-color:rgba(255,255,255,0.5); */
  background-color: #f9f5ef;
  background-color: #e9e3d8;
  margin-top: 0;
  padding: 10% 5% 5%;
}
.next .day dl dt p{
 /* color: #fff; */
}
.next ul li .day dl dt h4{
  text-align: center;
  margin-top: 10%;
}

 

/* *******************************
**********************************

navの色変え

**********************************
******************************** */

/* *******************************
**********************************











901以上













**********************************
******************************** */

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

  .sp-h{
    display: none;
  }
  .pc-h{
    display: block;
  }

}

/* *******************************
**********************************











900未満













**********************************
******************************** */

@media screen and (max-width:900px) {
















/* *******************************
**********************************

header

**********************************
******************************** */
.nav-pc{
  display: none;
}
.openbtn{
  display: block;
}

/* *******************************
**********************************

共通設定

**********************************
******************************** */
main{
  margin:0;
}



h2{
  font-size: 26px;
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  font-weight: 800;
}
h3{
  font-size: 18px;
  line-height: 1.5; /* 1行の高さを1.5倍に設定 */
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  font-weight: 700;
}

h5{
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 700;
}
/* ボタン */
h4{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
}
.btn01{
  border:2px solid rgb(17, 17, 17);
  display: inline-block;
  padding: 30px 70px;
  margin-bottom: 10%;
  background-color: #fafafa;
}
.btn01 {
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 600;
}

.btn01:hover,
a.btn01:hover {
  color: #fff;
  background: #434343;
  transition: all 0.3s ease;
}

p{
  font-size: 14px;
  line-height: 2; /* 1行の高さを1.5倍に設定 */
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  padding:10%;
  text-align: left;
}
.center-txt{
  text-align: center;
}

.f-box{
  display: block;
  /* 縦並びにしたい*/
}

.p-pc{
  display: none;
}
.p-sp{
  display: block;
  text-align: left;
}
.br-pc{
  display: none;
}
.br-sp{
  display: block;
}
/* *******************************
**********************************

top

**********************************
******************************** */
.logo-sp{
  display: block;
  z-index:10;
  position:absolute;
  left:40%;
  top:40%;
  width:20%;
  height:auto;

  filter: drop-shadow(10px 10px 10px #000);
}
.slider{
  position: relative;
}
.top{
  display: none;
}


.option dt,
.option dd {
	padding: 10px 0;
	border-bottom:1px solid rgb(175, 175, 175);		/*上下、左右へのボックス内の余白*/
  font-size: 14px;
}

/* rec */

.rec-box {
  background-color: #fafafa;
  padding: 10%;
  display: inline-block;
  /* border: #333 2px solid; */
}
.rec-box h3{
  margin: 0 0;
  padding: 0;
}

.rec-box h5{
  font-size: 16px;
  padding: 5% 0 0;
}
.rec-box-warp p{
  padding: 10% 0 2%;

}

/* レンタル */
.r-box{
  background-color: #fafafa;
  /* padding: 10%; */
  display: inline-block;
  /* border: #333 2px solid; */
  /* padding: 10%; */
}
.r-box h3{
  margin: 0 0;
  padding: 0;
}

.r-box h5{
  font-size: 16px;
  padding: 5% 0 0;
}
.r-box-warp p{
  padding: 10% 0 2%;
}

/* *******************************
**********************************

schedule

**********************************
******************************** */
.s-main .live{
  text-align: left;
}
.day dt{
  font-size: 20px;
  margin: 15% 0% 5%;
  background-color: #f9f5ef;
  padding: 5%;
}
.day dd{
  font-size: 15px;
  line-height: 2; /* 1行の高さを1.5倍に設定 */
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
  padding: 0 5% ;
  /* border-bottom: #000 1px solid; */
}
.day dl{
  padding: 0;
}

.s-01{
  margin: 0;
  padding:0;
}
.s-02{
  margin: 3% 0 0 0;
  padding:0;
  font-size: 16px;
  font-weight: 700;
}
.s-03{
  margin: 0;
  padding:0;
}
.s-04{
  margin: 0;
  padding:0;
  font-size: 14px;
  line-height: 2; /* 1行の高さを1.5倍に設定 */
  letter-spacing: 1px; /* 各文字の間に2ピクセルのスペースを追加 */
}


.artist{
  margin:0 ;
  /* padding-top:5%; */
  font-size: 16px;
}
.stelist{
  margin: 0;
  padding:0;
}
.s-main{
  /* background-color: #ccc; */
  margin: 2%;
}

/* *******************************
**********************************

スケジュール飾り文字

**********************************
******************************** */
.manth-title{
  font-size: 20px;
  /* padding: 10% 0 0; */
  top: 50%;
  left: 50%;
  position: absolute;/*絶対配置*/
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  font-style:italic ;
font-family:serif;
  color: #554437;
}


.manth-title-wrap img{
  width: 45%;
}



/* *******************************
**********************************

next

**********************************
******************************** */
.next{
  /* border: #000 5px solid; */
  margin-bottom: 25%;
  /* background-color: #322717; */
}
.next .day dl dt{
  /* border: #000 1px solid; */
  background-color: #f0d6ce;
  /* background-position: center;
  background-size: cover;
background-color:rgba(255,255,255,0.5); */
  background-color: #f9f5ef;
  background-color: #e9e3d8;
  margin-top: 0;
  padding: 10% 5% 5%;
}
.next .day dl dt p{
 /* color: #fff; */
}
.next ul li .day dl dt h4{
  text-align: center;
  margin-top: 10%;
}



/* *******************************
**********************************

navの色変え

**********************************
******************************** */



/* *******************************
**********************************

navの色変え

**********************************
******************************** */



/* *******************************
**********************************

navの色変え

**********************************
******************************** */

}