@charset "utf-8";

/* ==============================
   sisya.php専用CSS：全面リニューアル版。
   共通クラス(hero-location-banner/feature-grid/sain-accordion/sain-notice-list/
   said-top/ad-banner-grid等)はstyle_a.cssのものをそのまま使用し、
   ここにはsisya.php固有のクラスのみを置く。
   ============================== */

/* ヒーローエリア：tenga.php等と同じ「左スライダー・右ハイライトリスト」の骨組み */
body.sisya-page .sisya-hero-col {
  width: calc(100% - 48px);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  body.sisya-page .sisya-hero-col {
    width: calc(100% - 32px);
  }
}

body.sisya-page .sisya-hero-col .news {
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.sisya-page .sisya-hero-col .news .sisya-highlights-list {
  overflow-y: auto;
}

/* bxSliderがJSで.bx-viewportに固定してしまう高さ(インラインstyle)を解除し、
   中身(img)のaspect-ratio:12/5(style_a.css側)から自然に決まる高さに従わせる */
body.sisya-page .bx-viewport {
  height: auto !important;
}

/* 「試写室のポイント」リスト（アイコン+テキストを縦に並べる） */
.sisya-highlights-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sisya-highlights-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
}

.sisya-highlights-item:last-child {
  border-bottom: none;
}

.sisya-highlights-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: #fd0202;
}

.sisya-highlights-icon svg {
  width: 100%;
  height: 100%;
}

.sisya-highlights-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

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

  /* PC幅：スライダー(左)とポイント(右)を他ページと同じ骨組みで横並びに */
  body.sisya-page .sisya-hero-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  body.sisya-page main h2 {
    margin-top: 4px;
  }

  body.sisya-page .sisya-hero-row .bak {
    width: 600px;
    flex: 0 0 600px;
  }

  body.sisya-page .sisya-hero-col {
    width: 380px;
    flex: 0 0 380px;
    margin: 0;
  }

  body.sisya-page .sisya-hero-col .news .sisya-highlights-list {
    max-height: 210px;
  }
}

/* ① 概要カード：feature-gridは4項目のため既定のグリッド列数のままで問題なし */
body.sisya-page .sisya-overview-grid {
  margin-top: 16px;
}

/* ② 料金プラン：特典プラン表（PCは通常テーブル／スマホ768px以下はカード表示） */
.table-container {
  width: 100%;
  margin: 20px 0;
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  table-layout: fixed;
}

.plan-table th,
.plan-table td {
  border: 1px solid #eee;
  padding: 8px 8px;
  word-break: break-word;
}

.plan-table th {
  background-color: #fff4f4;
  color: #fd0202;
  font-weight: bold;
  text-align: center;
}

.plan-table th:nth-child(1),
.plan-table td:nth-child(1) {
  width: 25%;
  white-space: normal;
}

.plan-table th:nth-child(2),
.plan-table td:nth-child(2) {
  width: 15%;
  text-align: center;
  white-space: nowrap;
}

.plan-table th:nth-child(3),
.plan-table td:nth-child(3) {
  width: 20%;
  text-align: center;
  white-space: nowrap;
}

.plan-table th:nth-child(4),
.plan-table td:nth-child(4) {
  width: 40%;
  white-space: normal;
}

.plan-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.plan-table tbody tr:hover {
  background-color: #fff4f4;
}

/* スマホ768px以下：テーブルをカード形式に組み替え */
@media screen and (max-width: 768px) {
  .plan-table {
    border: none !important;
    table-layout: auto !important;
  }

  .plan-table thead {
    display: none !important;
  }

  .plan-table,
  .plan-table tbody,
  .plan-table tr,
  .plan-table td {
    display: block !important;
    width: 100% !important;
  }

  .plan-table tr {
    margin-bottom: 16px !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
  }

  .plan-table td {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 10px 12px !important;
    text-align: left !important;
    white-space: normal !important;
    position: relative !important;
  }

  .plan-table td::before {
    content: attr(data-label) !important;
    font-weight: bold !important;
    display: block !important;
    color: #fd0202 !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
  }

  .plan-table td:last-child {
    border-bottom: none !important;
  }
}

/* ご利用方法（dl）：他の項目と行間・左揃えの見た目を揃える */
.sisya-usage-dl dt {
  font-size: 16px;
  color: #fd0202;
}

.sisya-usage-dl dd {
  margin-top: 8px;
}

/* ③④ お得な特典・体験コーナー：event-cards(白カードを色付き枠でまとめる既存パターン)を
   流用し、水曜日半額券DAY・VR体験案内の2枚を1つの関連グループとして視覚的にまとめる */
body.sisya-page .sisya-perks-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 700px;
  margin: 0 auto;
  background: #fff4f4;
  border: 2px solid #f5c9c9;
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
  body.sisya-page .sisya-perks-group {
    padding: 16px;
  }
}

/* カテゴリバッジ：royalhoney-page等の丸バッジ(白地+赤枠+赤太字)と同じトーンで統一 */
body.sisya-page .sisya-category-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px;
  background: #fff;
  border: 1.5px solid #fd0202;
  border-radius: 999px;
  color: #fd0202;
  font-size: 11px;
  font-weight: bold;
}

body.sisya-page .sisya-banner-card {
  padding: 14px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

body.sisya-page .sisya-banner-text h4 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

body.sisya-page .sisya-banner-img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 10px;
  border-radius: 6px;
}

body.sisya-page .sisya-banner-text p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
}

body.sisya-page .sisya-banner-highlight {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* <font color="red">に代わる強調用クラス */
.sisya-highlight-text {
  color: #fd0202;
}

body.sisya-page .sisya-banner-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #666;
}

/* PC幅(768px以上)：画像とテキストを左右2カラムに(③水曜日半額券DAY・④VR体験案内で共通使用)。
   768px未満は従来通り画像が上・テキストが下の1カラムのまま */
body.sisya-page .sisya-banner-columns {
  display: block;
}

body.sisya-page .sisya-banner-media {
  margin: 0 0 10px;
}

body.sisya-page .sisya-banner-text {
  text-align: center;
}

@media screen and (min-width: 768px) {
  /* 上揃え：画像はカテゴリバッジ・見出しと横の高さが揃うよう、カード上部から開始させる */
  body.sisya-page .sisya-banner-columns {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  /* 画像側は列幅の約36%(概ね220〜260px)を確保。以前は正方形(aspect-ratio:1/1)の枠に
     object-fit:coverでトリミング収納していたが、画像の縦横比が枠と合わず左端・下端が
     見切れてしまっていたため、枠の高さを固定せずheight:autoで画像の自然な高さに
     追従させ、object-fit:containで画像全体が必ず収まるようにした（トリミングなし） */
  body.sisya-page .sisya-banner-media {
    flex: 0 0 36%;
    max-width: 36%;
    margin: 0;
    background: #fff4f4;
    border-radius: 8px;
  }

  body.sisya-page .sisya-banner-media .sisya-banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0;
    border-radius: 8px;
  }

  body.sisya-page .sisya-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
  }

  body.sisya-page .sisya-banner-text h4 {
    text-align: left;
  }
}

/* ⑤⑥ お部屋のタイプ・フリースペース/自販機：白カードでまとめ、ギャラリーはグリッド表示 */
body.sisya-page .sisya-room-card {
  margin: 0 0 24px;
  padding: 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

body.sisya-page .sisya-room-card:last-child {
  margin-bottom: 0;
}

/* フリースペース＝水色、自販機＝緑をアクセントの左枠線として活かす
   (カード自体の背景・角丸・影・paddingはお部屋タイプと共通のまま) */
body.sisya-page .sisya-freespace-card {
  border-left: 4px solid #6ec6ff;
}

body.sisya-page .sisya-vending-card {
  border-left: 4px solid #39c96a;
}

/* PC幅：お部屋のタイプ(id="sisya-rooms")のみ、左右の余白を水曜日半額券DAY等の
   .sisya-banner-cardと揃える(フリースペース・自販機セクションの.sisya-room-cardは対象外) */
@media screen and (min-width: 768px) {
  #sisya-rooms .sisya-room-card {
    padding: 14px 12px;
  }
}

body.sisya-page .sisya-room-card h4 {
  margin: 0 0 10px;
  font-size: 17px;
  color: #fd0202;
}

body.sisya-page .sisya-room-card p {
  text-align: center;
}

body.sisya-page .sisya-room-header {
  margin: 0 0 10px;
}

/* お部屋タイトル：以前は黒背景に文字を焼き込んだロゴ画像(sisya_vip1.jpg等)だったが、
   視認性・SEO・レスポンシブ対応のため実テキスト(h4+span)+CSSに置き換えた。
   h4は帯(黒〜濃紺グラデーション)、内側のspanにゴールド/ブルーのグラデーション文字+
   ほのかなglowを適用し、カード幅いっぱいの帯として完全中央揃えで表示する */
body.sisya-page .sisya-room-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  background: linear-gradient(135deg, #050505 0%, #16213e 50%, #050505 100%);
  box-sizing: border-box;
}

body.sisya-page .sisya-room-title-text {
  display: inline-block;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* VIP1号室・VIP2号室：ゴールド系グラデーション+発光風のtext-shadow */
body.sisya-page .sisya-room-title-vip {
  color: #f4d160;
  background-image: linear-gradient(180deg, #fff6d5 0%, #f4d160 35%, #b8860b 60%, #f4e5a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(244, 209, 96, 0.45), 0 0 2px rgba(255, 255, 255, 0.3);
}

/* 一般ルーム：既存の.vip1(青系トーン)に合わせたブルー系グラデーション+発光風 */
body.sisya-page .sisya-room-title-general {
  color: #7fd4ff;
  background-image: linear-gradient(180deg, #e3f7ff 0%, #6fd1ff 35%, #0a5c8a 60%, #bdeaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(111, 209, 255, 0.45), 0 0 2px rgba(255, 255, 255, 0.3);
}

body.sisya-page .sisya-room-desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: #333;
}

body.sisya-page .sisya-room-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 8px;
}

body.sisya-page .sisya-room-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* フリースペース・自販機案内：画像が1枚しかない項目(グッズ/下着自販機)は、
   お部屋タイプの2枚組写真グリッドと同じ1枚あたりのサイズ・比率になるよう、
   2カラムグリッドの片方だけ余白が残る形ではなく、幅50%で中央揃えにする */
body.sisya-page .sisya-room-gallery-single {
  display: flex;
  justify-content: center;
  margin: 0 0 8px;
}

/* 幅はリンク(a)側に指定する：imgに直接%指定すると、内包ブロックであるaの幅が
   不定(インライン)なため正しく解決されず、中央揃えが崩れる原因になっていた */
body.sisya-page .sisya-room-gallery-single a {
  display: block;
  width: 50%;
}

body.sisya-page .sisya-room-gallery-single img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

body.sisya-page .sisya-room-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 8px;
}

@media screen and (min-width: 500px) {
  body.sisya-page .sisya-room-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }

  /* PC幅：4枚の縦横比・サイズを完全に統一するため、正方形に近い4:3の枠を固定し、
     object-fit:coverでトリミングして揃える（元画像の比率が揃っていても、将来差し替えが
     あっても崩れないようにするための明示的な指定） */
  body.sisya-page .sisya-room-thumbs img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
  }
}

body.sisya-page .sisya-room-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* お部屋の特徴タグ：以前は画像に文字を焼き込んだ1枚のバナー画像(sisya_sp_vi1.jpg等)だったが、
   検索エンジンがテキストとして認識できるよう、実テキスト+CSSの色付きバッジに置き換えた */
body.sisya-page .sisya-room-tags {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  max-width: none;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
}

/* スマホ幅：写真グリッド内側の実寸(約259px)に対して、5タグを必ず1行に収めるため、
   フォントサイズ・padding・gapを縮小(折り返さないことを優先) */
body.sisya-page .sisya-room-tag {
  display: inline-block;
  padding: 5px 2px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

/* PC幅：5つのタグを1行・中央揃えのまま、写真グリッド幅(約940px)に対して
   大きすぎず余白も目立たないバランスのサイズに調整。
   ブレークポイントはこのサイトの他セクションと同じ960px(767〜959pxはタブレット幅として
   写真グリッド自体が506px前後に狭まるため、768pxを基準にすると960px手前でタグが
   グリッド幅からはみ出してしまう。960pxに合わせることでこの幅でも常にグリッド内に収まる) */
@media screen and (min-width: 960px) {
  body.sisya-page .sisya-room-tags {
    gap: 14px;
    margin-top: 14px;
  }

  body.sisya-page .sisya-room-tag {
    padding: 8px 16px;
    font-size: 17px;
    border-radius: 6px;
  }
}

body.sisya-page .sisya-tag-blue {
  background: #1a3fcf;
}

body.sisya-page .sisya-tag-lightblue {
  background: #6ec6ff;
}

body.sisya-page .sisya-tag-pink {
  background: #f76d9a;
}

body.sisya-page .sisya-tag-orange {
  background: #ff9800;
}

body.sisya-page .sisya-tag-green {
  background: #22c122;
}

body.sisya-page .sisya-tag-darkgreen {
  background: #1b6e1b;
}

body.sisya-page .sisya-tag-brightgreen {
  background: #39e639;
  color: #003300;
}

body.sisya-page .sisya-tag-black {
  background: #000;
}

/* ⑤ お部屋のタイプ：ギャラリー・サムネイル画像のライトボックス表示。
   rifu.php/sendai.phpの.rifu-lightbox/.sendai-lightboxと同じルールをsisya-プレフィックスで流用 */
body.sisya-page .sisya-slide-zoomable {
  cursor: zoom-in;
}

body.sisya-page .sisya-lightbox {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.85);
}

body.sisya-page .sisya-lightbox.is-open {
  display: flex;
}

body.sisya-page .sisya-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.sisya-page .sisya-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: background 0.15s ease;
}

body.sisya-page .sisya-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}