/* ==========================================================================
   customize.css
   --------------------------------------------------------------------------
   このファイルはSCSSを触らずにサイトのデザインを上書きするためのファイルです。
   style.css の後に読み込まれるため、ここに書いたスタイルが優先されます。

   【基本的な使い方】
   1. 変更したい要素のクラス名を開発者ツール（F12）で確認する
   2. 該当するセクションにCSSを追記する
   3. ファイルを保存するとすぐにサイトに反映される（ビルド不要）

   【注意】
   - !important は既存スタイルを上書きできない場合の最終手段として使う
   - 変更内容にはコメントを残しておくと後で分かりやすい
   ========================================================================== */


/* ==========================================================================
   1. サイト全体の共通設定
   ========================================================================== */

/* ここにサイト全体に影響するスタイルを追記する */
/* 例: フォントサイズ、行間、文字色など */


/* ==========================================================================
   2. ヘッダー
   ========================================================================== */

/* スマホ表示でJSのクラス付与を待たずに最初からヘッダーを表示する */
@media screen and (max-width: 1171px) {
   .l-header {
      transform: translateY(0) !important;
   }
}

/* ここにヘッダーのスタイル上書きを追記する */


/* ==========================================================================
   3. フッター
   ========================================================================== */

/* ここにフッターのスタイル上書きを追記する */
.floating-banner {
   display: none;
   position: fixed;
   bottom: 20px;
   /* 画面下部からの距離 */
   right: 20px;
   /* 画面右側からの距離 */
   z-index: 9999;
   /* 他の要素より最前面に表示 */
   width: 220px;
   /* バナーの横幅（画像のサイズに合わせて調整してください） */
   max-width: 85vw;
   /* スマホ画面からはみ出さないための設定 */
   /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20); */
   /* ふんわりとした影 */
   /* overflow: hidden; */
   /* background-color: #fff; */
   opacity: 0;
   transform: translateY(40px);
   pointer-events: none;
   transition: opacity 0.3s ease, transform 0.3s ease;
   /* 消える時のアニメーション */
}

.floating-banner.is-show {
   display: block;
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

/* バナー画像 */
.floating-banner .banner-img {
   width: 100%;
   height: auto;
   display: block;
   vertical-align: middle;
   filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.6));
}


/* 閉じる（×）ボタン */
.banner-close-btn {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 24px;
   height: 24px;
   background-color: rgba(0, 0, 0, 0.6);
   /* 黒透過背景 */
   color: #fff;
   border: none;
   border-radius: 50%;
   /* 丸いボタン */
   font-size: 16px;
   line-height: 22px;
   text-align: center;
   cursor: pointer;
   padding: 0;
   z-index: 10;
   transition: background-color 0.2s;
}

/* 閉じるボタンにホバーした時 */
.banner-close-btn:hover {
   background-color: rgba(0, 0, 0, 0.8);
}

/* フェードアウト用のクラス（JSで付与） */
.floating-banner.is-hidden {
   opacity: 0;
   transform: translateY(20px);
   /* 少し下に沈みながら消える */
   pointer-events: none;
   /* クリックできないようにする */
}


@media screen and (max-width: 820px) {
   .floating-banner {
      width: 42vw;
      /* スマホ時のバナーの横幅 */
      bottom: 60px;
      right: 15px;
   }

   .banner-close-btn {
      top: -8px;
      right: -8px;
   }

}

/* ==========================================================================
   4. トップページ
   ========================================================================== */

/* ここにトップページのスタイル上書きを追記する */

.p-banner {
   padding: 0 0 clamp(6rem, 11.0344827586vw, 16rem);
   position: relative;
   overflow: hidden
}

.p-banner__inner {
   width: 90%;
   margin: 0 auto;
   max-width: 1100px;
}

@media screen and (max-width: 599px) {
   .p-banner {
      padding: 0 5px 60px
   }
}

/* ==========================================================================
   5. イベント一覧・詳細
   ========================================================================== */

/* ここにイベントページのスタイル上書きを追記する */


/* ==========================================================================
   6. テナント（ショップ・レストラン）一覧・詳細
   ========================================================================== */

/* ここにテナントページのスタイル上書きを追記する */


/* ==========================================================================
   7. アクセスページ
   ========================================================================== */

/* アクセスページ用：満空情報のレイアウト調整 */
.p-access__parking-status-block {
   display: block !important;
   margin-bottom: 30px;
}

.p-access__parking-status-block .l-header__parking-info {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   max-width: 698px;
}

.p-access__parking-status-block .l-header__parking-item {
   flex: 1;
   min-width: 280px;
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
   padding: 15px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}


/* ==========================================================================
   8. その他のページ
   ========================================================================== */

/* ここにその他のページのスタイル上書きを追記する */


/* ==========================================================================
   9. スマホ専用の上書き（画面幅 767px 以下）
   ========================================================================== */
/*駐車場を先行提出のためフローティング一時非表示
@media screen and (max-width: 767px) {
   div#floating-banner .banner-link {
      display: none;
   }
}*/


/* ==========================================================================
   10. タブレット専用の上書き（画面幅 768px 〜 1171px）
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1171px) {
   /* ここにタブレット専用のスタイル上書きを追記する */
}