@charset "utf-8";



html {
  scroll-behavior: smooth;
}

body, html {
  position: static; /* default、z-indexの干渉を避ける */
  z-index: auto;    /* 明示的に指定してもOK */
}

/*========= PC ===============*/
@media only screen and  (min-width : 481px) {

  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
  .pc { display: block !important; }
  .sp { display: none !important; }
  .sp-nav { display: none !important; }

    /* パソコンで見たときのみ改行 */
  .br-sp {display: none; }



/* ヘッダー */
header {
  position: fixed;
  top: 2%; left: 0;
  width: 100%;
  z-index: 1000;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px 0 20px;
}

.header-inner {
  max-width: 900px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ロゴ画像 */
.logo img {
  padding-right: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.9));
}

/* メニュー */
nav ul {
  align-items: center;
  display: flex;
  list-style: none;
  gap: 24px;
  flex-wrap: wrap; /* 狭い画面で折り返しを許可 */
}

 

#cast a {
  font-family: fot-tsukuardgothic-std, sans-serif;
  text-decoration: none;
  color: #ff0000; 
  font-size: 20px;
  font-weight: bold;
  padding: 5px 30px;
  white-space: nowrap;
  text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000;
  transition: all 0.3s;
  border: solid 2px #ff0000;
  border-radius: 50px;
  /* 文字のシャドウ追加（既存のcolorに合わせて調整） */
  text-shadow: 0 0 5px rgba(0,0,0,0.9);
  transition: all 0.3s;
}
#cast a:hover {
  color: #fff;
  box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
    /* 文字のシャドウ追加（既存のcolorに合わせて調整） */
  text-shadow: 0 0 5px rgba(0,0,0,0.9);
  transition: all 0.3s;
}

#SYSTEM a {
  font-family: fot-tsukuardgothic-std, sans-serif;
  text-decoration: none;
  color: #0048ff; 
  font-size: 20px;
  font-weight: bold;
  padding: 5px 30px;
  white-space: nowrap;
  text-shadow: 0 0 5px #0048ff, 0 0 10px #0048ff, 0 0 20px #0048ff;
  transition: all 0.3s;
  border: solid 2px #0048ff;
  border-radius: 50px;
    /* 文字のシャドウ追加（既存のcolorに合わせて調整） */
  text-shadow: 0 0 5px rgba(0,0,0,0.9);
  transition: all 0.3s;
}
#SYSTEM a:hover {
  color: #fff;
  box-shadow: 0 0 10px #0048ff, 0 0 20px #0048ff;
    /* 文字のシャドウ追加（既存のcolorに合わせて調整） */
  text-shadow: 0 0 5px rgba(0,0,0,0.9);
  transition: all 0.3s;
}

#RECRUIT a {
  font-family: fot-tsukuardgothic-std, sans-serif;
  text-decoration: none;
  color: #00cf00; 
  font-size: 20px;
  font-weight: bold;
  padding: 5px 30px;
  white-space: nowrap;
  text-shadow: 0 0 5px #00cf00, 0 0 10px #00cf00, 0 0 20px #00cf00;
  transition: all 0.3s;
  border: solid 2px #00cf00;
  border-radius: 50px;
    /* 文字のシャドウ追加（既存のcolorに合わせて調整） */
  text-shadow: 0 0 5px rgba(0,0,0,0.9);
  transition: all 0.3s;
}
#RECRUIT a:hover {
  color: #fff;
  box-shadow: 0 0 10px #00cf00, 0 0 20px #00cf00;
}

#SNS a {
  font-family: fot-tsukuardgothic-std, sans-serif;
  text-decoration: none;
  color: #00bbff; 
  font-size: 20px;
  font-weight: bold;
  padding: 5px 30px;
  white-space: nowrap;
  text-shadow: 0 0 5px #00bbff, 0 0 10px #00bbff, 0 0 20px #00bbff;
  transition: all 0.3s;
  border: solid 2px #00bbff;
  border-radius: 50px;
    /* 文字のシャドウ追加（既存のcolorに合わせて調整） */
  text-shadow: 0 0 5px rgba(0,0,0,0.9);
  transition: all 0.3s;
}

#SNS a:hover {
  color: #fff;
  box-shadow: 0 0 10px #00bbff, 0 0 20px #00bbff;
  /* 文字のシャドウ追加（既存のcolorに合わせて調整） */
  text-shadow: 0 0 5px rgba(0,0,0,0.9);
  transition: all 0.3s;
}

/* SNSアイコン */
.sns-icons {
  padding-left: 30px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.sns-icons a {
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  transition: color 0.3s;
}
.mail {
  background-color: #80355d;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
.insta {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
.LINE {
  background-color:  #06C755;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.9);
}


  /* ヘッダー */

  /* top画像 */
/* top画像ラッパー */
.wrapper {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

/* 背景レイヤー（画像＋グラデーション） */
.bg-layer {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 背景画像 */
.background {
  width: 100%;
  height: 100%;
  object-fit: cover;
    object-position: center;
  display: block;
}

/* グラデーションだけ */
.bg-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgb(140, 0, 255), rgb(0, 0, 0));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}



/* 重ねる全体のコンテナ */
.overlay {
  position: absolute;
  top: 20vh; /* 固定150px → 相対的に */
  left: 0;
  width: 100%;
  padding: 0 5vw;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap; /* 横並びを優先、スマホ対応はメディアクエリで */
  gap: 0px;
  justify-content: space-between;
  z-index: 100;
  overflow: hidden;
}

/* 左側のカラム（ロゴ2つなど） */
.column-ab {
  margin-left: 8vw; 
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-right: -150px;
}

.logo01,
.logo02 {
  width: 80%;
  height: auto;
}


.rino {
  flex: 0 0 50%;
  max-width: 60%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  clip-path: inset(0 0 0 0); /* 必要なら後で調整 */
}

.image {
  max-width: 100%;
  height: auto;
}


  /* top画像 */

/* topネオン */
/* ネオン角エリア共通 */
.neon-corner {
  position: absolute;
  width: 5vw;
  height: 5vw;
  pointer-events: none;
  z-index: 99;
}

/* 各位置 */
.neon-corner.top-left {
  top: 2vw;
  left: 2vw;
}
.neon-corner.top-right {
  top: 2vw;
  right: 2vw;
}
.neon-corner.bottom-left {
  bottom: 2vw;
  left: 2vw;
}
.neon-corner.bottom-right {
  bottom: 2vw;
  right: 2vw;
}

/* 共通線スタイル */
.neon-corner .line {
  position: absolute;
  border-radius: 0.5vw;
}

/* 上辺 */
.neon-corner.top-left .line.top {
  top: 0;
  left: 0;
  height: 0.3vw;
  width: 30vw;
  background: #00edff;
  box-shadow: 0 0 0.5vw #00edff, 0 0 1.5vw #00edff;
}

.neon-corner.top-right .line.top {
  top: 0;
  right: 0;
  height: 0.3vw;
  width: 60vw;
  background: #ff00ff;
  box-shadow: 0 0 0.5vw #ff00ff, 0 0 1.5vw #ff00ff;
}

/* 下辺 */
.neon-corner.bottom-left .line.bottom {
  bottom: 0;
  left: 0;
  height: 0.3vw;
  width: 80vw;
  background: #ff00ff;
  box-shadow: 0 0 0.5vw #ff00ff, 0 0 1.5vw #ff00ff;
}

.neon-corner.bottom-right .line.bottom {
  bottom: 0;
  right: 0;
  height: 0.3vw;
  width: 3vw;
  background: #00edff;
  box-shadow: 0 0 0.5vw #00edff, 0 0 1.5vw #00edff;
}

/* 左辺 */
.neon-corner.top-left .line.left {
  left: 0;
  top: 0;
  width: 0.3vw;
  height: 40vh;
  background: #00edff;
  box-shadow: 0 0 0.5vw #00edff, 0 0 1.5vw #00edff;
}

.neon-corner.bottom-left .line.left {
  left: 0;
  bottom: 0;
  width: 0.3vw;
  height: 20vh;
  background: #ff00ff;
  box-shadow: 0 0 0.5vw #ff00ff, 0 0 1.5vw #ff00ff;
}

/* 右辺 */
.neon-corner.top-right .line.right {
  right: 0;
  top: 0;
  width: 0.3vw;
  height: 15vh;
  background: #ff00ff;
  box-shadow: 0 0 0.5vw #ff00ff, 0 0 1.5vw #ff00ff;
}

.neon-corner.bottom-right .line.right {
  right: 0;
  bottom: 0;
  width: 0.3vw;
  height: 50vh;
  background: #00edff;
  box-shadow: 0 0 0.5vw #00edff, 0 0 1.5vw #00edff;
}

/* topネオン */



/* クーポン */
#クーポン {
  position: relative;
  padding: 0;
  background: linear-gradient(#520093, #000);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
}

#クーポン img {
  width: 100vw;
  display: block;
  margin: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  object-fit: cover;
}


#クーポン h2 {
  position: relative;
  z-index: 2;
  margin: 0 auto 30px auto;
  padding: 50px 5vw 20px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 0 5px #000, 0 0 10px #000;
  max-width: 90vw;
  box-sizing: border-box;
  white-space: normal;
  word-break: keep-all;
}


/* クーポン中身 */
/* neon-box全体を前に */
.neon-container {
  display: flex;
  flex-wrap: wrap; /* 必要に応じて折り返しもOK */
  justify-content: center; /* 中央揃え */
  gap: 30px; /* ボックス間の余白 */
  margin: 40px 0;
  align-items: center;
}

.neon-box, .neon-box2 {
    font-family: fot-tsukuardgothic-std, sans-serif;
  position: relative;
  z-index: 2;
  background: none; /* 背景画像は不要（親にあるため） */
  padding: 0px 20px 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 400px; /* 幅300pxを基準にしつつ縮小可 */
  max-width: 100%;

}


/* 枠全体のネオン風スタイル */
.neon-border {
  color: #00ffff; /* ← ネオン色を currentColor で制御 */
  border: 3px solid currentColor;
  box-shadow:
    0 0 8px currentColor,
    0 0 16px currentColor,
    0 0 24px currentColor;
  padding:  10px 10px 0px 10px;
  max-width: 100%;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  background-color: transparent;
}


/* テキスト①（ネオンタイトル） */
.neon-title {
 font-size: 25px;
  font-weight: bold;
  color: currentColor;
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor;
  margin-bottom: 5px;
}

/* 下線（ネオンライン） */
.neon-line {
  height: 3px;
  width: 300px;
  background-color: currentColor;
  margin: 0 auto;
  box-shadow:
    0 0 8px currentColor,
    0 0 20px currentColor;
}

/* テキスト②（白） */
.normal-text {
 font-family: fot-tsukuardgothic-std, sans-serif;
 font-size: 30px;
  color: #fff;
  margin-bottom: -20px;
}

/* 円部分 */
.circle-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:10px;
  flex-wrap: wrap;
}

.circle-white, .circle-yellow {
  display: flex;
  justify-content: center;
  align-items: flex-end;  /* 下揃え */
  font-weight: bold;
}

.circle-white {
  color: #fff;
  font-size: 30px;
}

.circle-yellow {
  color: #FFD700;
  font-size: 40px;
}

.circle-yellow2 {
  font-weight: bold;
  color: #FFD700;
  font-size: 35px;
  line-height: 40px;
  margin: 20px 0;
}

.small-yen {
  font-size: 60%;
  margin-left: 2px;
  line-height: 1;
  vertical-align: baseline; /* baseline揃え */
  position: relative;
  bottom:15px;  /* 数字の下に少し下げる */
  display: inline-block;
}

 .small-yen2 {
  font-size: 60%;
  margin-left: 2px;
  line-height: 1;
  vertical-align: baseline; /* baseline揃え */
  position: relative;
  bottom: 20px;  /* 数字の下に少し下げる */
  display: inline-block;
}

.arrow {
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 0 5px #000;
}
/* クーポン中身 */

#sarani {
  margin: 30px 0;
   text-align: center;
   font-family: "corporate-logo-ver2", sans-serif;
    color: #fff;
    font-size: 30px;
}

/* クーポン */






/* りのさんプロフ */
#CAST {
  position: relative;
  padding: 0;
  background: linear-gradient(to right,#520093, #000,#520093);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
  height: 140vh; /* 画面高さに追従 */
 z-index: 0;
}

/* 背景画像（下層） */
#castbask img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;    /* 親幅にフィット */
  height: 120vh;   /* 親高さにフィット */
  object-fit: cover;
  opacity: 0.5;
  z-index: -1;
  margin: 0;
  display: block;
}

/* 前面画像（中央寄せ） */
#casttitle img{
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -50%); /* 横・縦ともに中央揃え */
  height: 20vh;             /* 高さは画面比で調整可 */
  width: auto;              /* 横幅は縦に合わせて自動で */
  opacity: 0.5;
  z-index: 1;
  margin: 0;
  display: block;
}

#casttitle02 img{
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%); /* 横・縦ともに中央揃え */
  height: 20vh;             /* 高さは画面比で調整可 */
  width: auto;              /* 横幅は縦に合わせて自動で */
  opacity: 0.5;
  z-index: 1;
  margin: 0;
  display: block;
}
/* プロフィールセクション全体 */
#profile-section {
  color: #fff;
  padding: 50px 10px 0 10px;
  font-family: fot-tsukuardgothic-std, sans-serif;
  box-sizing: border-box;
  margin: 0 auto;
  position: absolute;
  top: 22%;
  display: flex;
  justify-content: center; /* 横方向のセンタリング */
  align-items: center; /* 縦方向のセンタリング */
  width: 100%;
  max-width: 100%;
  flex-direction: column; /* 縦方向に並べる */
  z-index: 1;
  text-align: center; /* セクション内テキストを中央揃え */
}

/* プロフィール全体ラッパー */
.profile-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1100px;  /* 最大幅を指定して、広がりすぎないように調整 */
  margin: 0 auto;
  flex-wrap: wrap; /* レスポンシブ対応 */
}

/* 写真部分 */
.profile-photo {
    border-radius: 10px;
  flex: 1 1 350px;
  max-width: 350px;
  height: 500px;
  margin-left: 150px;
  overflow: hidden;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* テキスト部分 */
.profile-text {
  flex: 2 1 500px;
  font-size: 18px;
  line-height: 1.8;
  min-width: 500px;
  box-sizing: border-box;
  text-align: left; /* 左寄せに設定 */
}

/* 名前 */
.profile-text h3 {
  margin-top: 0;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: -3px;
}

/* Qのテキスト */
#question {
  font-weight: bold;
  color: #e7317d;
  font-size: 22px;
  margin-bottom: 10px;
  text-align: left;
}

/* インタビュー全体の枠 */
.interview-content {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-top: 40px;
  color: #fff;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  box-sizing: border-box;
}

.interview-content img {
  position: relative;
  width: 30%;
  display: block;
  margin-top: 20px;
  margin-left: 50%;
  transform: translateX(-50%); /* 画像を中央に配置 */
  z-index: 1;
}

/* ＋字装飾 */
.interview-cross {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 40px;
  height: 60px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* 横線 */
.interview-cross::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
  transform: translateY(-50%);
}

/* 縦線 */
.interview-cross::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: white;
  transform: translateX(-50%);
}

/* 下＋字装飾 */
.interview-cross2 {
  position: absolute;
  bottom: 1;
  right: 10%;
  width: 50px;
  height: 70px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* 横線 */
.interview-cross2::before {
  content: "";
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
  transform: translateY(-50%);
}

/* 縦線 */
.interview-cross2::after {
  content: "";
  position: absolute;
  right: 30%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: white;
  transform: translateX(-50%);
}

/* Instagramリンク */
#name {
  display: flex;
  justify-content: start; /* 中央揃え */
  align-items: center; /* 縦方向も中央揃え */
  gap: 20px; /* アイコンと名前の間隔 */
}

#name a {
  text-decoration: none;
  display: inline-block;
  background-color: #fff; /* 背景色は白でアイコンのデザイン保持 */
  padding: 5px 10px;
  border-radius: 5%;
}

.insta2 {
  font-size: 30px;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* りのさんプロフ */


/* 横並びりのさんお写真 */
#rinophoto {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px 0 20px 0;
  background-color: rgba(255, 255, 255, 0.8); /* 正しい透明指定 */
  width: 100%;
  box-sizing: border-box;
}

#rinophoto ul {
  max-width: 60%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  text-align: center;
  gap: 20px;
  padding: 0;
  box-sizing: border-box;
}

#rinophoto ul li {
  flex: 1 1 auto;
  list-style: none;
}

#rinophoto img {
  width:100%;
  height: auto;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}



/* 横並びりのさんお写真 */



/* 横並びキャストお写真 */
#CASTLIST {
  position: relative;
  padding: 0;
  background: linear-gradient(to right,#520093, #000,#520093);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
  height: 60vh; /* 画面高さに追従 */
  z-index: 0;
}

#castphoto {
  position: absolute; /* または指定なし */
   top: 40%;
  left: auto;
  right: auto;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

#castphoto ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  list-style: none;
  padding: 0;
  margin: 20px auto 0 auto;
}

#castphoto li {
  flex: 1;
  max-width: 160px;
  min-width: 80px;
}

#castphoto img {
  width: 100%;
  border: 1px solid #fff;
  padding: 5px;
  display: block;
}

#castphoto p {
  font-size: 20px;
  color: #fff;
  margin-top: 5px;
}



/* ポップアップ全体 */
#profile-popup {
  font-family: fot-tsukuardgothic-std, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* 背景黒の半透明 */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
z-index: 9999 !important;

}

#profile-popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ポップアップ内容（角丸 + 背景白） */
#profile-popup-content {
  width: 90%;
  max-width: 1000px;
  max-height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* プロフィールセクション全体 */
#profile-section02 {
  color: #000000;
  font-family: fot-tsukuardgothic-std, sans-serif;
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* プロフィール全体ラッパー */
.profile-wrapper02 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 写真部分 */
.profile-photo02 {
    border-radius: 10px;
  flex: 1 1 200px;
  max-width: 200px;
  height: 550px;
  overflow: hidden;
}

.profile-photo02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* テキスト部分 */
.profile-text02 {
  flex: 2 1 500px;
  font-size: 18px;
  line-height: 1.8;
  min-width: 300px;
  max-width: 600px;
  box-sizing: border-box;
  text-align: left;
}

/* 名前 */
.profile-text02 h3,
.profile-text02 h4 {
  margin-top: 0;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: -3px;
}

/* インタビュー質問 */
#question02 {
  font-weight: bold;
  color: #e7317d;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: left;
}

/* インタビュー全体 */
.interview-content02 {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-top: 40px;
  color: #000000;
  font-size: 15px;
  line-height: 1.6;
  box-sizing: border-box;
}

/* インタビュー画像 */
.interview-content02 img {
  position: relative;
  width: 30%;
  display: block;
  margin-top: 20px;
  margin-left: 80%;
  transform: translateX(-50%);
  z-index: 1;
}

/* ＋字装飾 */
.interview-cross03 {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 40px;
  height: 60px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.interview-cross03::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(0, 0, 0);
  transform: translateY(-50%);
}

.interview-cross03::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgb(0, 0, 0);
  transform: translateX(-50%);
}

.interview-cross04 {
  position: absolute;
  bottom: 20px; /* ← 明示的に余白を確保 */
  right: 20px;  /* ← こちらも余白を確保 */
  width: 50px;
  height: 70px;
  pointer-events: none;
  z-index: 0;
}

.interview-cross04::before {
  content: "";
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(0, 0, 0);
  transform: translateY(-50%);
}

.interview-cross04::after {
  content: "";
  position: absolute;
  right: 30%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgb(0, 0, 0);
  transform: translateX(-50%);
}

/* Instagramリンク */
#name02 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

#name02 a {
  text-decoration: none;
  display: inline-block;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5%;
}

.insta2 {
  font-size: 30px;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}


/* 他キャストプロフ */





/* 料金 */

#CAST03 {
  position: relative;
  padding: 0;
  background: linear-gradient(to right,#520093, #000,#520093);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
  height: 770vh; /* 画面高さに追従 */
  z-index: 0;
  margin: 0;
  overflow-x: hidden;
}

#castbask2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 好みで調整 */
  z-index: -1;  /* 背景に回す */
  overflow: hidden;
}

#castbask2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  display: block;
}



/* 共通最大幅と中央寄せ */
#roze,
#center-wrapper,
#center-wrapper2,
#SYSTEM,
#SYSTEM01,
#SYSTEM02,
#SYSTEM03,
#SYSTEM04,
#SYSTEM05,
#SYSTEM06,
#SYSTEM07,
#SYSTEM08,
#SYSTEM09,
#shisha,
.container,
.container2 {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

#roze img {
  width: 50%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 80px auto 0 auto;
}

#center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 40px auto 20px auto;
  width: 100%;
  max-width: 80%;
  box-sizing: border-box;
}

#menutitle-img {
  width: 350px;
  height: auto;
  display: block;
}

#center-wrapper2 {
  text-align: center;
  align-items: center;
  gap: 10px;
  margin: 40px auto 20px auto;
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
}

#menutitle-img2 {
  margin: 0 auto;
  width: 400px;
  height: auto;
  display: block;
}

.neon-line-horizontal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.neon-line-horizontal .line {
  width: 300px;
  height: 3px;
  background: #ff00ff;
  border-radius: 3px;
  box-shadow:
    0 0 5px #ff00ff,
    0 0 10px #ff00ff,
    0 0 20px #ff00ff;
}

#SYSTEM {
  text-align: center;
  margin: 20px auto;
  color: #fff;
  width: fit-content;
}

#SYSTEM01 {
  color: #fff;
  max-width: 50%;
  font-weight: bold;
  font-size: 30px;
  border-bottom: solid 2px #fff;
  margin: 0 auto;
}

#SYSTEM02 ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: flex;
  gap: 60px;
  justify-content: center;
}

#SYSTEM02 li {
  text-align: center;
}

.seat-type {
  font-size: 20px;
  color: #ffffff;
  display: block;
  margin-bottom: -40px;
}

.price-number {
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  display: inline-block;
  margin-bottom: 10px;
}

.price-unit {
  font-size: 15px;
  vertical-align: sub;
  margin-left: 2px;
  color: #ffffff;
}

#SYSTEM03 {
  text-align: center;
  font-size: 20px;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

#SYSTEM04 {
  margin-top: 30px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
}

#SYSTEM06 {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

#SYSTEM06 ul {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.price-unit2 {
  font-size: 15px;
  position: relative;
  top: -2px; 
  margin-left: 2px;
  color: #ffffff;
}

#SYSTEM06 p {
  font-size: 20px;
}

#SYSTEM06 img {
  width: 50px;
  transform: rotate(20deg);
}

.grid-container {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 30px auto;
  gap: 40px;
  text-align: center;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 120px;
}

.title {
  border: solid 2px #fff;
  padding: 0px 20px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

.name {
  font-size: 20px;
  margin-bottom: 5px;
}

#SYSTEM05 {
  color: #fff;
  width: 100%;
  margin: 0 auto;
}

#other,
#shimei {
  width: 95%;
  max-width: 900px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  border-bottom: solid 1px #fff;
}

.price-unit3 {
  font-size: 15px;
  position: relative;
  margin-left: 2px;
  color: #ffffff;
}

#SYSTEM05 p {
  font-size: 20px;
}

#SYSTEM07 {
  display: block;
  text-align: center;
  margin: -20px auto;
  color: #fff;
  font-size: 20px;
  line-height: 25px;
  width: 100%;
}

#SYSTEM08 {
  color: #fff;
  max-width: 70%;
  font-weight: bold;
  font-size: 25px;
  border-bottom: solid 2px #fff;
  margin: 0 auto;
  text-align: center;
}

#SYSTEM09 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  color: #fff;
  padding: 0 20px; 
}

#shisha {
  margin: 0 auto;
  color: white;
  padding: 20px 30px;
  overflow-x: hidden;
  max-width: 100%;
}

.container2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  flex-wrap: nowrap;
  max-width: 1100px;
  margin: 0 auto;
}

.left-block,
.right-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.column2 {
  width: 300px;
  position: relative;
  margin: 20px auto 0 auto;
  align-items: center;
}

.title2 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin: -5px auto;
  z-index: 1;
}

.neon-line {
  height: 3px;
  width: 100%;
  border-radius: 6px;
  margin: 5px auto;
}

.neon-purple {
  color: #7300ff;
  text-shadow: 0 0 5px #7300ff, 0 0 10px #7300ff, 0 0 20px #ff00ff;
}

.neon-purple.neon-line {
  background-color: #7300ff;
  box-shadow: 0 0 5px #7300ff, 0 0 10px #7300ff, 0 0 20px #ff00ff;
}

.neon-orange {
  color: #ff8732;
  text-shadow: 0 0 5px #ff8732, 0 0 10px #ff8732, 0 0 20px #ff7200;
}

.neon-orange.neon-line {
  background-color: #ff8732;
  box-shadow: 0 0 5px #ff8732, 0 0 10px #ff8732, 0 0 20px #ff7200;
}

.neon-blue {
  color: #0064ff;
  text-shadow: 0 0 5px #0064ff, 0 0 10px #0064ff, 0 0 20px #0064ff;
}

.neon-blue.neon-line {
  background-color: #0064ff;
  box-shadow: 0 0 5px #0064ff, 0 0 10px #0064ff, 0 0 20px #0064ff;
}

.list2 {
  font-size: 20px;
  margin: 20px auto 0 auto;
  text-align: left;
  line-height: 2;
  list-style-position: inside; 
  padding-left: 20px;
  padding-right: 20px;
}

.container {
  color: white;
  padding: 10px 5px 30px 5px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.gaidetitle {
  margin-bottom: 20px;
  font-size: 25px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding: 5px 16px;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 4px;
  background: transparent;
  text-align: center;
  color: #fff;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  text-shadow: none;
}

.gaidetitle::before,
.gaidetitle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #fff 0%, #fff 30%, transparent 40%, transparent 60%, #fff 60%, #fff 100%);
  z-index: 1;
}

.gaidetitle::before {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.gaidetitle::after {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.gaidetitle > .triangle-before,
.gaidetitle > .triangle-after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  transform: translateX(-50%) rotate(135deg);
  z-index: 2;
}

.gaidetitle > .triangle-before {
  background-color: #000;
}

.gaidetitle > .triangle-after {
  border: 2px solid #fff;
  border-color: #fff #fff transparent transparent;
  bottom: -11px;
}

.point-list {
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.point-list li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  text-align: left;
}

.point-list img {
  width: 100px;
  margin-right: 5px;
  flex-shrink: 0;
}

.point-list p {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
}



/* 諸注意ボックス本体（四角） */
.caution-wrapper {
  position: relative;
  margin-top: 80px;
  padding: 40px 20px 20px 20px;
  color: #fff;
  text-align: left;
}

/* 本体は線なし */
.caution {
  position: relative;
  z-index: 1;
}

/* 左線 */
.border-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 8px #ffc800, 0 0 16px #ffc800;
  z-index: 1;
}

/* 右線 */
.border-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 8px #ffc800, 0 0 16px #ffc800;
  z-index: 1;
}

/* 下線 */
.border-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 8px #ffc800, 0 0 16px #ffc800;
  z-index: 1;
}


/* 諸注意のタイトル部分 */
.caution h5 {
  margin-top: -75px;
  position: absolute;
  top: 0;  
  left: 50%;
  transform: translateX(-50%); 
  padding: 10px 30px;
  font-size: 25px;
  color: #ffc800;
  font-weight: bold;

  border-radius: 8px;
  z-index: 2;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}


/* アイコンのデザイン（線画） */
.warning-icon {
  font-size: 22px;
  color: transparent;
  -webkit-text-stroke: 2px #ffc800; /* 線の色 */
  margin: 0 10px;
  display: inline-block;
  position: relative;
  top: 2px;
}




/* 上辺の線をh5の左右に描く（中央は描かない） */
.caution h5::before,
.caution h5::after {
  content: "";
  position: absolute;
  top: 35px; 
  width: 0; /* 左右の線の長さ */
  height: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 4px #ffc800, 0 0 8px #ffc800;
  z-index: 10;
}

.caution h5::before {
  right: 100%;
  margin-right: -6%; /* ← 少し離す */
  width: 250px;       /* 横線の長さを少し短縮 */
}

.caution h5::after {
  left: 100%;
  margin-right: -6%; /* ← 少し離す */
  width: 239px;       /* 横線の長さを少し短縮 */
}

/* ボーダー部分 */
.border-left, .border-right, .border-bottom {
  position: absolute;
  background-color: #ffc800;
  z-index: 1;
}

.border-left {
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
}

.border-right {
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
}



/* リスト部分 */
.caution ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.caution li {
  margin-bottom: 5px;
}



/* シーシャガイド */


#shot{
  margin: 60px auto 40px auto;
}

#shot img{
  width: 50%;
}

/* 料金 */


/* リクルート */
#RECRUIT1 {
  position: relative;
  height: 430vh;
  overflow: hidden;
}

/* 背景画像 */
.clipped-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../image/back.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}

/* 上に重ねるコンテンツ */
.recruit-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding-top: 60px; /* ← タイトルの縦位置を調整 */
  text-align: center;
}

/* タイトルスタイル */
#RECRUITtitle {
  color: #6c42b8;
  font-family: Impact, sans-serif;
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  width: 70%;
  margin: 40px auto 0 auto;
}

#RECRUITtitle::before,
#RECRUITtitle::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: #6c42b8;
  opacity: 0.6;
}

#RECRUITtitle span {
  white-space: nowrap;
}

#RECRUITtitle2 {
  color: #6c42b8;
  font-family: Impact, sans-serif;
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  width: 70%;
  margin: 80px auto 0 auto;
}

#RECRUITtitle2::before,
#RECRUITtitle2::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: #6c42b8;
  opacity: 0.6;
}

#RECRUITtitle2 span {
  white-space: nowrap;
}

#RECRUITsub{
  font-weight: bold;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-size: 18px;
    color: #6c42b8;
}


.recruit-box {
  width: 60%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;
  padding: 40px 0px;
  color: #fff;
}

.recruit-box2{
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 60px;
  padding: 40px 0px;
  color: #fff;
}

 .recruit-box3{
  width: 40%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;
  padding: 40px 0px;
  color: #fff;
}

.recruit-images {
  display: flex;
  gap: 10px;
}

.recruit-images img {
  width: 200px;
  height: 350px;
  object-fit: cover; /* 縮尺を保って枠に収める */
  border-radius: 0 20px 20px 0; /* 右上と右下を丸く */
}

.recruit-text-block {
  max-width: 100%;
}

.recruit-subtitle {
  font-size: 25px;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #6c42b8;
  font-weight: bold;
    text-align: left;
}

.recruit-subtitle2 {
    text-align: left;
  font-size: 20px;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #6c42b8;
  font-weight: bold;
  margin-bottom: 5px;
  margin-left: -10px;
}

.recruit-text-block p {
  margin-left: 15px;
  text-align: left;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 20px;
  color: #000;
}

.custom-box {
  position: relative;
  border: 1px solid black; /* 黒1pxの枠線 */
  padding:10px  5px;
  max-width: 250px;
  margin: 20px auto;
  box-sizing: border-box;
}

/* 右上にだけ斜線を入れる */
.custom-box::before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 30px;   /* 斜線の長さ調整 */
  height: 30px;
  border-right: 1px solid black;
  transform: rotate(45deg);
  transform-origin: top right;
  background: transparent;
  pointer-events: none;
}


.custom-box2 {
  position: relative;
  border: 1px solid black; /* 黒1pxの枠線 */
  padding:10px  5px;
  max-width: 450px;
  margin: 20px auto;
  box-sizing: border-box;
}

/* 右上にだけ斜線を入れる */
.custom-box2::before {
  content: "";
  position: absolute;
  top: -4.5%;
  left: -3.5%;
  width: 30px;   /* 斜線の長さ調整 */
  height: 30px;
  border-right: 1px solid black;
  transform: rotate(45deg);
  transform-origin: top right;
  background: transparent;
  pointer-events: none;
}

.recruit-images2 {
  display: flex;
  gap: 10px;
}

.recruit-images2 img {
  width: 210px;
  height: 350px;
  object-fit: cover; /* 縮尺を保って枠に収める */
  border-radius: 20px 0px 0px 20px; /* 右上と右下を丸く */
}


.recruit-images3 {
  display: flex;
  gap: 10px;
}

.recruit-images3 img {
  width: 200px;
  height: 350px;
  object-fit: cover; 
  border-radius: 0px 20px 20px 0px; 
}



#subcatch {
  margin: 40px auto;
  color: #ff4ea5;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  width: 70%;
  font-weight: bold;
}

#subcatch::before,
#subcatch::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: #ff4ea5;
  opacity: 0.6;
}

#subcatch span {
  white-space: nowrap;
}

.price-number2 {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  display: inline-block;
}

.price-unit4 {
  font-size: 15px;
  position: relative;
  margin-left: 2px;
  color: #000;
}


#shift{
    font-family: fot-tsukuardgothic-std, sans-serif;
    text-align: center;
    font-size: 20px;
}


.boxed-content {
  position: relative;
  border: 1px solid black;
  padding: 40px 5px 40px 5px; /* 上だけ多めにする */
  margin: 50px auto;
  max-width: 50%;
    font-family: fot-tsukuardgothic-std, sans-serif;
  box-sizing: border-box;
}

.boxed-content ul{
  display: flex;
  justify-content: space-around;
}

.boxed-content p{
  font-size: 20px;
  text-align: left;
}

.box-title {
  position: absolute;
  top: -16px; /* 上に浮かせる */
  left: 15%;
  padding: 0 20px;
  transform: translateX(-50%);
  background: #3a404f;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
}



/* リクルート */


/* アクセス */
#chizu{
  margin: 80px auto 40px auto; 
}
#chizu iframe{
  width: 50%;
  height: 400px;
}


#accessp{
  text-align: center;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #000;
  font-size: 20px;
  margin-bottom: 40px;
}

#accessp2{
  margin: 0 auto 80px auto;
  max-width: 20%;
  padding: 10px;
  text-align: left;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #000;
  font-size: 20px;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
}

#accessp2 a{
  color: #000;
}


/* アクセス */

/* SNS */

.sns-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 80px auto;
  text-align: center;
  font-family: fot-tsukuardgothic-std, sans-serif;
}

.sns-icon-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sns-icon-block a{
  text-decoration: none;
}

.sns-icon-block p{
  background-color: #6c42b8;
  color: #ffe1e0;
  padding:2px 15px;
  border-radius: 50px;
  font-size:20px;
  font-weight: bold;
}

/* 丸い背景 */
.icon-circle {
  width: 80px;
  height:80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: #fff;
}

/* Instagramのブランドカラー */
.instagram-bg {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* LINEのブランドカラー */
.line-bg {
  background-color: #00c300;
}

/* アイコンサイズ */
.icon-circle i {
  font-size: 40px;
}
/* SNS */


/* フッター */

.footer p{
  background-color: #000;
  padding: 20px;
  bottom: 0;
}
.footer p{
  color: #fff;
  font-size: 15px;
  text-align: center;
  font-family: "kozuka-mincho-pro", serif;
}


/* フッター */


/* 背景の図形 */



/* 共通図形 */

/* 共通 */
.shape {
  position: absolute;
  width: 20px;
  height: 20px;
  transform-origin: center;
  pointer-events: none;
}

.shape svg {
  width: 100%;
  height: 100%;
  display: block;
}



/* 星（SVGに対応させるため） */
.star {
  width: 24px;
  height: 24px;
}
.star svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* 背景の図形 */



}


  
  










/*========= スマホ ===============*/
@media only screen and  (max-width : 481px) {

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
  .pc { display: none !important; }
  .sp { display: block !important; }

    /* パソコンで見たときのみ改行 */
    .br-pc {display: none; }

/* ヘッダー */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 999;
}

#header02 {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo img {
  padding-left: 20px;
  height: 30px !important;
  align-items: center;
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.9));
}

.sns-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.sns-icons a {
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  transition: color 0.3s;
  
}

.mail, .insta, .LINE {
  padding: 10px;
  border-radius: 50%;
}

.mail {
  background-color: #80355d;
 box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.insta {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.LINE {
  background-color: #06C755;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  padding-right: 20px;
}

.hamburger span {
  background-color: #fff;
  height: 3px;
  border-radius: 2px;
  transition: 0.3s ease;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.sp-nav {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  z-index: 1000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.sp-nav.active {
  max-height: 500px;
}

.sp-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp-nav ul li a {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  font-size: 20px;
  padding: 8px 30px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  position: relative;
  color: inherit;
  transition: color 0.3s, box-shadow 0.3s;
  border: none;
}

.sp-nav ul li.sns {
  margin-bottom: 40px;
}

.sp-nav ul li.cast a::after,
.sp-nav ul li.system a::after,
.sp-nav ul li.recruit a::after,
.sp-nav ul li.sns a::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 8px;
  height: 2px;
  border-radius: 50px;
  background-color: transparent;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.sp-nav ul li.cast a {
  color: #ff0000;
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.8), /* 黒い影（オフセットして影っぽく） */
    0 0 5px #ff0000,
    0 0 10px #ff0000,
    0 0 20px #ff0000;
}
.sp-nav ul li.cast a::after {
  background-color: #ff0000;
  box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}

.sp-nav ul li.system a {
  color: #0048ff;
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.8),
    0 0 5px #0048ff,
    0 0 10px #0048ff,
    0 0 20px #0048ff;
}
.sp-nav ul li.system a::after {
  background-color: #0048ff;
  box-shadow: 0 0 10px #0048ff, 0 0 20px #0048ff;
}

.sp-nav ul li.recruit a {
  color: #00cf00;
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.8),
    0 0 5px #00cf00,
    0 0 10px #00cf00,
    0 0 20px #00cf00;
}
.sp-nav ul li.recruit a::after {
  background-color: #00cf00;
  box-shadow: 0 0 10px #00cf00, 0 0 20px #00cf00;
}

.sp-nav ul li.sns a {
  color: #00bbff;
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.8),
    0 0 5px #00bbff,
    0 0 10px #00bbff,
    0 0 20px #00bbff;
}
.sp-nav ul li.sns a::after {
  background-color: #00bbff;
  box-shadow: 0 0 10px #00bbff, 0 0 20px #00bbff;
}


.sp-nav ul li a:hover {
  color: #fff;
}
.sp-nav ul li a:hover::after {
  box-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 40px currentColor;
}



/* ヘッダー */

/* top画像 */
.wrapper {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

.bg-layer {
  position: relative;
  width: 100%;
  height: 100%;
}

.background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgb(140, 0, 255), rgb(0, 0, 0));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.overlay {
  top: 100px;
  left: 0;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  gap: 10px;
  z-index: 100;
}

.column-ab {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 20%;
}

.logo01,
.logo02 {
  width: 200px; /* 親の幅に合わせる */
  height: auto;
  max-width: 300%; /* 指定を維持しつつ拡大制限 */
}

.rino {
  flex: 0 0 50%;
  max-width: 100vw;
  height: auto;
  object-fit: cover;
  object-position: center top;
  clip-path: inset(0 0 0 0);
}

/* top画像 */



/* topネオン */
.neon-corner {
  position: absolute;
  pointer-events: none;
  z-index: 100;
}

/* 各角のサイズと位置調整：pxをvw/vhに変換してレスポンシブ */
.neon-corner.top-left {
  top: 1.5vw;
  left: 1.5vw;
  width: 30vw;       /* 横線の長さ */
  height: 30vh;      /* 縦線の長さ */
  color: #00edff;
}

.neon-corner.top-right {
  top: 1.5vw;
  right: 1.5vw;
  width: 50vw;
  height: 10vh;
  color: #ff00ff;
}

.neon-corner.bottom-left {
  bottom: 1.5vw;
  left: 1.5vw;
  width: 40vw;
  height: 20vh;
  color: #ff00ff;
}

.neon-corner.bottom-right {
  bottom: 1.5vw;
  right: 1.5vw;
  width: 17vw;
  height: 40vh;
  color: #00edff;
}

/* 共通線スタイル（太さ3px、角丸6pxは維持） */
.neon-corner .line {
  position: absolute;
  border-radius: 6px;
  background-color: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 20px currentColor;
}

/* 上辺 */
.neon-corner .line.top {
  top: 0;
  height: 3px;
  width: 100%;
}

/* 下辺 */
.neon-corner .line.bottom {
  bottom: 0;
  height: 3px;
  width: 100%;
}

/* 左辺 */
.neon-corner .line.left {
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
}

/* 右辺 */
.neon-corner .line.right {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
}


/* topネオン */


/* クーポン */
#クーポン {
  position: relative;
  padding: 0;
  background: linear-gradient(#520093, #000);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
  
}

#クーポン img {
  width: 100vw;
  display: block;
  margin: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  object-fit: cover;
}


#クーポン h2 {
  position: relative;
  z-index: 2;
  margin: 0 auto 30px auto;
  padding: 30px 5vw 20px;
  color: #fff;
  font-size: 5vw;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 0 5px #000, 0 0 10px #000;
  max-width: 90vw;
  box-sizing: border-box;
  white-space: normal;
  word-break: keep-all;
}


/* クーポン中身 */
/* neon-box全体を前に */
.neon-box {
    font-family: fot-tsukuardgothic-std, sans-serif;
  position: relative;
  z-index: 2;
  background: none; /* 背景画像は不要（親にあるため） */
  padding: 0px 20px 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.neon-box2 {
    font-family: fot-tsukuardgothic-std, sans-serif;
  position: relative;
  z-index: 2;
  background: none; /* 背景画像は不要（親にあるため） */
  padding: 0px 20px 50px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 枠全体のネオン風スタイル */
.neon-border {
  color: #00ffff; /* ← ネオン色を currentColor で制御 */
  border: 3px solid currentColor;
  box-shadow:
    0 0 8px currentColor,
    0 0 16px currentColor,
    0 0 24px currentColor;
  padding:  10px 10px 0px 10px;
  max-width: 100%;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  background-color: transparent;
}


/* テキスト①（ネオンタイトル） */
.neon-title {
 font-size: 20px;
  font-weight: bold;
  color: currentColor;
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor;
  margin-bottom: 5px;
}

/* 下線（ネオンライン） */
.neon-line {
  height: 3px;
  width: 250px;
  background-color: currentColor;
  margin: 0 auto;
  box-shadow:
    0 0 8px currentColor,
    0 0 20px currentColor;
}

/* テキスト②（白） */
.normal-text {
 font-family: fot-tsukuardgothic-std, sans-serif;
 font-size: 30px;
  color: #fff;
  margin-bottom: -20px;
}

/* 円部分 */
.circle-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:10px;
  flex-wrap: wrap;
}

.circle-white, .circle-yellow {
  display: flex;
  justify-content: center;
  align-items: flex-end;  /* 下揃え */
  font-weight: bold;
}

.circle-white {
  color: #fff;
  font-size: 30px;
}

.circle-yellow {
  color: #FFD700;
  font-size: 40px;
}

.circle-yellow2 {
  font-weight: bold;
  color: #FFD700;
  font-size: 35px;
  line-height: 40px;
  margin: 20px 0;
}

.small-yen {
  font-size: 60%;
  margin-left: 2px;
  line-height: 1;
  vertical-align: baseline; /* baseline揃え */
  position: relative;
  bottom:15px;  /* 数字の下に少し下げる */
  display: inline-block;
}

 .small-yen2 {
  font-size: 60%;
  margin-left: 2px;
  line-height: 1;
  vertical-align: baseline; /* baseline揃え */
  position: relative;
  bottom: 20px;  /* 数字の下に少し下げる */
  display: inline-block;
}

.arrow {
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 0 5px #000;
}
/* クーポン中身 */

#sarani {
  margin: 30px 0;
   text-align: center;
font-family: "corporate-logo-ver2", sans-serif;
    color: #fff;
    font-size: 30px;
}

/* クーポン */




/* りのさんプロフ */
#CAST {
  position: relative;
  padding: 0;
  background: linear-gradient(to right,#520093, #000,#520093);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
  height: 150vh; /* 画面高さに追従 */
  z-index: 0;
}

/* 背景画像（下層） */
#castbask {
  position: absolute;
  transition-property: 0;
  left: 0;
  width: 100%;
  height: 30vh; /* 好みで調整 */
  z-index: -1;  /* 背景に回す */
  overflow: hidden;
}

#castbask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  display: block;
}



/* 前面画像（中央寄せ） */
#casttitle02 img{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%); /* 横・縦ともに中央揃え */
  height: 20vh;             /* 高さは画面比で調整可 */
  width: auto;              /* 横幅は縦に合わせて自動で */
  opacity: 0.5;
  z-index: 1;
  margin: 0;
}


#casttitle img{
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translate(-50%, -50%); /* 横・縦ともに中央揃え */
  height: 20vh;             /* 高さは画面比で調整可 */
  width: auto;              /* 横幅は縦に合わせて自動で */
  opacity: 0.5;
  z-index: 1;
  margin: 0;
}

/* プロフィールセクション全体 */
#profile-section {
  color: #fff;
  font-family: fot-tsukuardgothic-std, sans-serif;
  box-sizing: border-box;
  position: absolute;
  top: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 縦方向の並び */
  height: 100vh; /* 画面の高さに合わせる */
  text-align: center; /* セクション内テキストを中央揃え */
  position: relative;
  z-index: 1;
}

/* プロフィールラッパー */
.profile-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* 写真エリア */
.profile-photo {
  flex: 0 0 180px;
  height: 500px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  margin-bottom: 20px; /* 写真下のスペースを追加 */
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* テキストエリア */
.profile-text {
  flex: 1 1 auto;
  margin-left: 10px;
  line-height: 1.8;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.profile-text p{
  font-size: 13px;
}

/* 名前 */
.profile-text h3 {
  margin-top: 0;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
  margin-bottom: -3px;
}

/* Instagramリンク */
#name {
  display: flex;
  justify-content: start; /* 中央揃え */
  align-items: center;
  gap: 40px;
  padding-right: 30px;
}

#name a {
  text-decoration: none;
  display: inline-block;
  background-color: #fff; /* 背景色は白でアイコンのデザイン保持 */
  padding: 5px 10px;
  border-radius: 5%;
}

.insta2 {
  font-size: 30px;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Qテキスト */
#question {
  color: #e7317d;
  font-weight: bold;
  margin-left: 20px;
  margin-bottom: 10px;
  display: inline-block; /* 横並び維持 */
}

#answer {
  margin-bottom: 10px;
  margin-left: 20px;
}

/* インタビュー全体の枠 */
.interview-content {
  position: relative;
  display: block;
  margin-top: 40px;
  color: #fff;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size:13px;
  line-height: 1.6;
  box-sizing: border-box;
}

.interview-content img {
  position: relative;
  width: 40%;
  display: block;
 margin-left: 50%;
 margin-bottom: 20px;
  z-index: 1;
}


/* ＋字装飾 */
.interview-cross{
  position: absolute;
  width: 100px;
  height: 40px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}

 .interview-cross2 {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* 横線 */
.interview-cross::before, .interview-cross2::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(255, 255, 255);
  transform: translateY(-50%);
}

.interview-cross::before {
  top: 30%;
}

.interview-cross2::before {
  bottom: 70%;
}

/* 縦線 */
.interview-cross::after, .interview-cross2::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgb(255, 255, 255);
}

.interview-cross::after {
  left: 60%;
}

.interview-cross2::after {
  right: 20%;
}

/* 下＋字装飾位置調整 */
.interview-cross2 {
  bottom: 1;
  right: -15%;
}
/* りのさんプロフ */


/* 横並びりのさんお写真 */
#rinophoto {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 10px 0 ;
  background-color: rgba(255, 255, 255, 0.8); /* 修正: rgbaで透明度を正確に */
  width: 100%;
  box-sizing: border-box;
}

#rinophoto ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 小さい画面で折り返す */
  margin: 0 auto;
  padding: 0 10px;
  gap: 5px;
  list-style: none;
  box-sizing: border-box;
}

#rinophoto ul li {
  flex: 1 1 auto;
  min-width: 80px; /* 必要に応じて調整 */
  max-width: calc(100% / 3 - 5px); /* 5枚並ぶ前提ならここで調整 */
  box-sizing: border-box;
}

#rinophoto img {
  width: 100%;
  height: auto;
  display: block;
}

/* 横並びりのさんお写真 */


/* 横並びキャストお写真 */
#CASTLIST {
  position: relative;
  padding: 0;
  background: linear-gradient(to right,#520093, #000,#520093);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
  height: 70vh; /* 画面高さに追従 */
  z-index: 0;
}

#castphoto {
  position: absolute; /* または指定なし */
   top: 32%;
  left: auto;
  right: auto;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

#castphoto ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 小さい画面で折り返す */
  margin: 0 auto;
  padding: 0 10px;
  gap: 5px;
  text-align: center;
  list-style: none;
  box-sizing: border-box;
}

#castphoto ul li {
  margin: 0 auto 10px auto;
  flex: 1 1 auto;
  min-width: 80px; /* 必要に応じて調整 */
  max-width: calc(100% / 3 - 5px); /* 5枚並ぶ前提ならここで調整 */
  box-sizing: border-box;
}

#castphoto img {
   border: solid 1px #fff;
   padding: 5px;
  width: 70%;

}

#castphoto p {
   font-size: 18px;
   color: #fff;
}



/* ポップアップ全体 */
#profile-popup {
    font-family: fot-tsukuardgothic-std, sans-serif;
  background-color: rgba(0, 0, 0, 0.6); /* 背景黒の半透明 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
z-index: 9999 !important;
}
#profile-popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#profile-popup-content {
  max-width: 100%;
  width: 100%;
  max-height: 100vw;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 20px 0px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  box-sizing: border-box;
}

/* プロフィールセクション全体 */
#profile-section02 {
  width: 100%;
  font-family: fot-tsukuardgothic-std, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* プロフィールラッパー */
.profile-wrapper02 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* 写真エリア */
.profile-photo02 {
  flex: 0 0 180px;
  height: 500px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.4);
}

.profile-photo02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストエリア */
.profile-text02 {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  overflow: hidden;
  position: relative;
}

/* 名前 */
.profile-text02 h3 {
  margin-top: 0;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: -3px;
  text-align: left;
}

.profile-text02 h4 {
  margin-top: 0;
  font-size: 27px;
  font-weight: bold;
  margin-bottom: -3px;
  text-align: left;
}

/* Instagramリンク */
#name02 {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

#name02 a {
  text-decoration: none;
  display: inline-block;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5%;
}

.insta2 {
  font-size: 30px;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Q&A テキスト */
#question02 {
  color: #e7317d;
  font-weight: bold;
  margin-left: 20px;
  margin-bottom: 10px;
  display: inline-block;
}

#question03 {
  color: #e7317d;
  font-weight: bold;
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
  display: inline-block;
}

#answer02, #answer03 {
  margin-bottom: 10px;
  margin-left: 20px;
  display: block;
}

/* インタビュー全体の枠 */
.interview-content02 {
  position: relative;
  display: block;
  color: #000000;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  box-sizing: border-box;
}

.interview-content02 img {
  width: 40%;
  display: block;
  margin: 0px 0 20% 50%;
  z-index: 1;
}

/* ＋字装飾（上） */
.interview-cross03 {
  position: absolute;
  top: 5%;
  left: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 0;
}

/* ＋字装飾（下） */
.interview-cross04 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 0;
}

/* 横線（共通） */
.interview-cross03::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(0, 0, 0);
  top: -10%;
  transform: translateY(-50%);
}

 .interview-cross04::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(0, 0, 0);
  top: 120%;
  transform: translateY(-50%);
}


.interview-cross03::after{
  content: "";
  position: absolute;
  top: -30%;
  left: 20%;
  width: 1px;
  height: 100%;
  background-color: rgb(0, 0, 0);
  transform: translateX(-50%);
}

.interview-cross04::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 80%;
  width: 1px;
  height: 100%;
  background-color: rgb(0, 0, 0);
  transform: translateX(-50%);
}

/* 他キャストプロフ */


/* 料金 */

#CAST03 {
  position: relative;
  padding: 0;
  background: linear-gradient(to right,#520093, #000,#520093);
  overflow: hidden;
  font-family: fot-tsukuardgothic-std, sans-serif;
  height: 900vh; /* 画面高さに追従 */
 z-index: 0;
}

#castbask2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30vh; /* 好みで調整 */
  z-index: -1;  /* 背景に回す */
  overflow: hidden;
}

#castbask2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  display: block;
}

#roze {
  margin: 40px auto;
  text-align: center;
}

#roze img {
  width: 80%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
}

#center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 40px auto 20px auto;
  width: 100%;  /* ここを100%に */
  max-width: 600px; /* 必要に応じて最大幅を指定 */
  box-sizing: border-box;
}


#menutitle-img {
  width: 250px; /* お好みで調整 */
  height: auto;
  display: block;
}

#menutitle-img3 {
  width: 300px; /* お好みで調整 */
  height: auto;
  display: block;
}


#center-wrapper2 {
  text-align: center;
  align-items: center;
  gap: 10px;
  margin: 40px auto 20px auto;
  width: 100%;  /* ここを100%に */
  max-width: 600px; /* 必要に応じて最大幅を指定 */
  box-sizing: border-box;
}


#menutitle-img2 {
  margin: 0 auto;
  width: 400px; /* お好みで調整 */
  height: auto;
  display: block;
}


/* 横向き二重線のコンテナ */
.neon-line-horizontal {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 二重線の間隔 */
  justify-content: center;
  align-items: center; /* 追加 */
}

/* 横線 */
.neon-line-horizontal .line {
  width: 100px;  /* 線の長さ */
  height: 3px;  /* 線の太さ */
  background: #ff00ff;
  border-radius: 3px;
  box-shadow:
    0 0 5px #ff00ff,
    0 0 10px #ff00ff,
    0 0 20px #ff00ff;
}

/* SYSTEM */

#SYSTEM {
  font-family: fot-tsukuardgothic-std, sans-serif;
  text-align: center;
  margin: 20px auto;
  color: #fff;
  width: fit-content;
}

/* システム */

#SYSTEM01 {
  color: #fff;
  max-width: 50%;
  font-weight: bold;
  font-size: 30px;
  border-bottom: solid 2px #fff;
  margin: 0 auto;
}

#SYSTEM02 ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: flex;          /* 横並び */
  gap: 40px;              /* li同士の間隔 */
  justify-content: center; /* 中央寄せ（必要に応じて） */
}

#SYSTEM02 li {
  text-align: center;
}

/* 「カウンター席」の文字を小さく */
.seat-type {
  font-size: 15px;  /* 小さめ */
  color: #ffffff;      /* 任意で色調整 */
  display: block;
  margin-bottom: -40px;
}

/* 数字を大きく */
.price-number {
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  display: inline-block;
  margin-bottom: 10px; /* 数字の下に余白 */
}

.price-unit {
  font-size: 15px;
  vertical-align: sub;  /* 下付き */
  margin-left: 2px;
  color: #ffffff;
}



#SYSTEM03{
  text-align: center;
  font-size: 18px;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

#SYSTEM04{
  margin-top: 30px;
  text-align: center;
  font-size: 15px;
  line-height: 25px;
}

/* システム */


/* 飲み放題 */

#SYSTEM06 {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

#SYSTEM06 ul {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.price-unit2 {
  font-size: 15px;
  position: relative;
  top: -2px; 
  margin-left: 2px;
  color: #ffffff;
}

#SYSTEM06 p{
  font-size: 18px;
}

#SYSTEM06 img{
  width: 50px;
  transform: rotate( 20deg );
}


.grid-container {
  color: #fff;
  display: flex;
  justify-content: center;  /* 中央寄せ */
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 100%;         /* 必要に応じて最大幅 */
  margin: 30px auto 0 auto;  /* ← autoで中央に配置 */
  gap: 40px;                 /* 各列の間隔 */
  text-align: center;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ← 中央揃え */
  text-align: center;    /* ← テキストも中央 */
  min-width: 120px;      /* ← 最小幅を揃えると安定する */
}

.title {
  border: solid 2px #fff;
  padding: 0px 20px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.name {
  font-size: 18px;
  margin-bottom: 5px;
}

/* 飲み放題 */

/* その他 */

#SYSTEM05 {
  color: #fff;
  width: 100%;
  margin: 0 auto;
}

#other {
  width: 95%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  border-bottom: solid 1px #fff;
}

#shimei{
  width: 95%;
  margin: 50px auto 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  border-bottom: solid 1px #fff;
}


.price-unit3 {
  font-size: 15px;
  position: relative;
  margin-left: 2px;
  color: #ffffff;
}



#SYSTEM05 p{
  font-size: 18px;
}

/* その他 */


/* シーシャ */

#SYSTEM07{
  margin: -20px auto;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 25px;
}


#SYSTEM08 {
  color: #fff;
  max-width: 70%;
  font-weight: bold;
  font-size: 25px;
  border-bottom: solid 2px #fff;
  margin: 0 auto;
  text-align: center;
}

/* シーシャ */

/* シーシャガイド */

#SYSTEM09 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 17px;
  line-height:50px;
  color: #fff;
  padding: 0 20px; 
}



#shisha {
  margin: 0;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: white;
  padding: 20px 30px;
  overflow-x: hidden;
  position: relative;
   position: relative;
  max-width: 80%; 
  margin: 0 auto;   
}

.container2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap; /* 崩れ防止 */
}

.left-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.right-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.column2 {
  width: 180px;
  position: relative;
  margin: 0 auto;
  align-items: center;
}

.title2 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin: -5px auto;
  z-index: 1;
}

/* ネオン上下線（題字と同色に切替） */
.neon-line {
  height: 3px;
  width: 100%;
  border-radius: 6px;
  margin: 5px auto;
}

.neon-purple {
  color: #7300ff;
  text-shadow: 0 0 5px #7300ff, 0 0 10px #7300ff, 0 0 20px #ff00ff;
}

.neon-purple.neon-line {
  background-color: #7300ff;
  box-shadow: 0 0 5px #7300ff, 0 0 10px #7300ff, 0 0 20px #ff00ff;
}

.neon-orange {
  color: #ff8732;
  text-shadow: 0 0 5px #ff8732, 0 0 10px #ff8732, 0 0 20px #ff7200;
}

.neon-orange.neon-line {
  background-color: #ff8732;
  box-shadow: 0 0 5px #ff8732, 0 0 10px #ff8732, 0 0 20px #ff7200;
}

.neon-blue {
  color: #0064ff;
  text-shadow: 0 0 5px #0064ff, 0 0 10px #0064ff, 0 0 20px #0064ff;
}

.neon-blue.neon-line {
  background-color: #0064ff;
  box-shadow: 0 0 5px #0064ff, 0 0 10px #0064ff, 0 0 20px #0064ff;
}

.list2 {
  font-size: 16px;
  margin: 20px auto 0 auto;
  text-align:left;
  line-height: 2;
  list-style-position: inside; 
  padding-left: 0;         
}





.container {
  color: white;
  font-family: fot-tsukuardgothic-std, sans-serif;
  position: relative;
  padding: 10px 5px 30px 5px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.gaidetitle {
  font-size: 25px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding: 5px 16px;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 4px;
  background: transparent;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  /* 左右の線は透明にして後で擬似要素で作る */
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
    text-shadow: none; /* ← これも明示的に書くとより確実 */
}


.gaidetitle::before,
.gaidetitle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background:
    linear-gradient(to bottom,
      #fff 0%,
      #fff 30%,
      transparent 40%,
      transparent 60%,
      #fff 60%,
      #fff 100%);
  z-index: 1;
  /* box-shadowは削除しました */
}

/* 左線 */
.gaidetitle::before {
  left: 0;
  border-radius: 4px 0 0 4px;
}

/* 右線 */
.gaidetitle::after {
  right: 0;
  border-radius: 0 4px 4px 0;
}


/* 吹き出し三角形 */
/* これまで通りの形を維持しつつボーダーを付ける */
.gaidetitle > .triangle-before,
.gaidetitle > .triangle-after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  transform: translateX(-50%) rotate(135deg);
  z-index: 2;
}

.gaidetitle > .triangle-before {
  background-color: #000; /* 背景色 */
}

.gaidetitle > .triangle-after {
  border: 2px solid #fff;
  border-color: #fff #fff transparent transparent;
  bottom: -11px;
}


/* ポイントリスト */
.point-list {

  list-style: none;
  padding: 0;
  margin:  40px 0;
}

.point-list li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  text-align: left;
}

.point-list img {
  width: 60px;
  margin-right: 5px;
  flex-shrink: 0;
}

.point-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* 諸注意ボックス本体（四角） */
.caution-wrapper {
  position: relative;
  margin-top: 60px;
  padding: 40px 20px 20px 20px;
  color: #fff;
  text-align: left;
}

/* 本体は線なし */
.caution {
  position: relative;
  z-index: 1;
}

/* 左線 */
.border-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 8px #ffc800, 0 0 16px #ffc800;
  z-index: 1;
}

/* 右線 */
.border-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 8px #ffc800, 0 0 16px #ffc800;
  z-index: 1;
}

/* 下線 */
.border-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 8px #ffc800, 0 0 16px #ffc800;
  z-index: 1;
}


/* 諸注意のタイトル部分 */
.caution h5 {
    font-family: fot-tsukuardgothic-std, sans-serif;
  margin-top: -75px;
  position: absolute;
  top: 0;  
  left: 50%;
  transform: translateX(-50%); 
  padding: 10px 30px;
  font-size: 25px;
  color: #ffc800;
  font-weight: bold;
  text-shadow:
    0 0 1px #ffc800,
    0 0 2px #ffc800;
  border-radius: 8px;
  z-index: 2;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}


/* アイコンのデザイン（線画） */
.warning-icon {
  font-size: 22px;
  color: transparent;

  margin: 0 10px;
  display: inline-block;
  position: relative;
  top: 2px;
 
}




/* 上辺の線をh5の左右に描く（中央は描かない） */
.caution h5::before,
.caution h5::after {
  content: "";
  position: absolute;
  top: 35px; 
  width: 0; /* 左右の線の長さ */
  height: 2px;
  background-color: #ffc800;
  box-shadow: 0 0 4px #ffc800, 0 0 8px #ffc800;
  z-index: 10;
}

.caution h5::before {
  right: 100%;
  margin-right: -6%; /* ← 少し離す */
  width: 90px;       /* 横線の長さを少し短縮 */
}

.caution h5::after {
  left: 100%;
  margin-right: -6%; /* ← 少し離す */
  width: 78px;       /* 横線の長さを少し短縮 */
}

/* ボーダー部分 */
.border-left, .border-right, .border-bottom {
  position: absolute;
  background-color: #ffc800;
  z-index: 1;
}

.border-left {
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
}

.border-right {
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
}



/* リスト部分 */
.caution ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}

.caution li {
  margin-bottom: 5px;
}



/* シーシャガイド */


#shot{
  margin: 60px auto 40px auto;
}

#shot img{
  width: 70%;
}

/* 料金 */

/* リクルート */
#RECRUIT1 {
  position: relative;
  height: 440vh;
  overflow: hidden;
}

/* 背景画像 */
.clipped-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../image/back.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}

/* 上に重ねるコンテンツ */
.recruit-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding-top: 60px; /* ← タイトルの縦位置を調整 */
  text-align: center;
}

/* タイトルスタイル */
#RECRUITtitle, #RECRUITtitle2{
  color: #6c42b8;
  font-family: Impact, sans-serif;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  width: 100%;
}

#RECRUITtitle::before,
#RECRUITtitle::after, 
#RECRUITtitle2::before,
#RECRUITtitle2::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: #6c42b8;
  opacity: 0.6;
}

#RECRUITtitle span,#RECRUITtitle2 span {
  white-space: nowrap;
}

#RECRUITsub{
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-size: 15px;
    color: #6c42b8;
    font-weight: bold;
}


.recruit-box,.recruit-box2,.recruit-box3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 40px 0px;
  color: #fff;
}

.recruit-images {
  display: flex;
  gap: 10px;
}

.recruit-images img {
  width: 140px;
  height: 350px;
  object-fit: cover; /* 縮尺を保って枠に収める */
  border-radius: 0 20px 20px 0; /* 右上と右下を丸く */
}

.recruit-text-block {
  max-width: 100%;
}

.recruit-subtitle {
  font-size: 20px;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #6c42b8;
  font-weight: bold;
    text-align: left;
}

.recruit-subtitle2 {
    text-align: left;
  font-size: 15px;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #6c42b8;
  font-weight: bold;
  margin-bottom: 5px;
  margin-left: -10px;
}

.recruit-text-block p {
  text-align: left;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 12px;
  color: #000;
}

.custom-box {
  position: relative;
  border: 1px solid black; /* 黒1pxの枠線 */
  padding:10px  5px;
  max-width: 400px;
  margin: 20px auto;
  box-sizing: border-box;
}

/* 右上にだけ斜線を入れる */
.custom-box::before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 30px;   /* 斜線の長さ調整 */
  height: 30px;
  border-right: 1px solid black;
  transform: rotate(45deg);
  transform-origin: top right;
  background: transparent;
  pointer-events: none;
}

.custom-box2 {
  position: relative;
  border: 1px solid black; /* 黒1pxの枠線 */
  padding: 5px;
  max-width: 350px;
  margin: 10px auto;
  box-sizing: border-box;
}

/* 右上にだけ斜線を入れる */
.custom-box2::before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 30px;   /* 斜線の長さ調整 */
  height: 30px;
  border-right: 1px solid black;
  transform: rotate(45deg);
  transform-origin: top right;
  background: transparent;
  pointer-events: none;
}

.recruit-images2 {
  display: flex;
  gap: 10px;
}

.recruit-images2 img {
  width: 140px;
  height: 380px;
  object-fit: cover; /* 縮尺を保って枠に収める */
  border-radius: 20px 0px 0px 20px; /* 右上と右下を丸く */
}


.recruit-images3 {
  display: flex;
  gap: 10px;
}

.recruit-images3 img {
  width: 180px;
  height: 350px;
  object-fit: cover; 
  border-radius: 0px 20px 20px 0px; 
}



#subcatch {
  margin: 40px 0;
  color: #ff4ea5;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  width: 100%;
  font-weight: bold;
}

#subcatch::before,
#subcatch::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: #ff4ea5;
  opacity: 0.6;
}

#subcatch span {
  white-space: nowrap;
}

.price-number2 {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  display: inline-block;
}

.price-unit4 {
  font-size: 13px;
  position: relative;
  margin-left: 2px;
  color: #000;
}


#shift{
    font-family: fot-tsukuardgothic-std, sans-serif;
    text-align: center;
    font-size: 15px;
}


.boxed-content {
  position: relative;
  border: 1px solid black;
  padding: 40px 5px 40px 5px; /* 上だけ多めにする */
  margin: 50px auto;
  max-width: 90%;
    font-family: fot-tsukuardgothic-std, sans-serif;
  box-sizing: border-box;
}

.boxed-content ul{
  display: flex;
  justify-content: space-around;
}

.boxed-content p{
  font-size: 15px;
  text-align: left;
}

.box-title {
  position: absolute;
  top: -16px; /* 上に浮かせる */
  left: 15%;
  padding: 0 10px;
  transform: translateX(-50%);
  background: #3a404f;
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
}



/* リクルート */


/* アクセス */
#chizu{
  margin: 40px auto; 
}
#chizu iframe{
  width: 90%;
  height: 300px;
}


#accessp{
  text-align: center;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #000;
  font-size: 17px;
  margin-bottom: 20px;
}

#accessp2{
  margin: 0 auto 40px auto;
  max-width: 60%;
  padding: 10px;
  text-align: left;
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #000;
  font-size: 15px;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
}

#accessp2 a{
  color: #000;
}

/* アクセス */

/* SNS */

.sns-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 40px auto;
  text-align: center;
  font-family: fot-tsukuardgothic-std, sans-serif;
}

.sns-icon-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sns-icon-block a{
  text-decoration: none;
}


.sns-icon-block p{
  background-color: #6c42b8;
  color: #ffe1e0;
  padding:2px 15px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
}

/* 丸い背景 */
.icon-circle {
  width: 70px;
  height:70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: #fff;
}

/* Instagramのブランドカラー */
.instagram-bg {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* LINEのブランドカラー */
.line-bg {
  background-color: #00c300;
}

/* アイコンサイズ */
.icon-circle i {
  font-size: 40px;
}
/* SNS */


/* フッター */

.footer p{
  background-color: #000;
  padding: 20px;
  bottom: 0;
}
.footer p{
  color: #fff;
  font-size: 13px;
  text-align: center;
  font-family: "kozuka-mincho-pro", serif;
}


/* フッター */


/* 背景の図形 */



/* 共通図形 */

/* 共通 */
.shape {
  position: absolute;
  width: 10px;
  height: 10px;
  transform-origin: center;
  pointer-events: none;
}

.shape svg {
  width: 100%;
  height: 100%;
  display: block;
}



/* 星（SVGに対応させるため） */
.star {
  width: 24px;
  height: 24px;
}
.star svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* 背景の図形 */
}