@charset "UTF-8";

/* ===== reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  -webkit-text-size-adjust: 100%;
}

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

/* ===== layout =====
   デザイン幅 1000px（画像は2xで書き出し）
   1000px 以下の画面では全体が等比縮小 */
.container {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ===== 可変背景 ===== */

/* KV：斜めグラデーションのため左右エッジを別々に延長
   左端: #0080CB が y535px まで続き、y1190px で #00B0EC
   右端: #0080CB から y774px で #00B0EC に到達 */
.bg-kv {
  position: relative;
  background: #00b0ec;
  overflow: hidden; /* 端の装飾がはみ出してもスクロールバーを出さない */
}

.bg-kv::before,
.bg-kv::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 0;
}

.bg-kv::before {
  left: 0;
  background: linear-gradient(to bottom, #0080cb 0, #0080cb 535px, #00b0ec 1190px);
}

.bg-kv::after {
  right: 0;
  background: linear-gradient(to bottom, #0080cb 0, #00b0ec 774px);
}

/* 中面：フラットブルー */
.bg-main {
  background: #00b0ec;
  overflow: hidden; /* 端の装飾がはみ出してもスクロールバーを出さない */
}

/* フッター：白 */
.bg-footer {
  background: #fff;
}

/* ===== リンクホットスポット ===== */
.slice {
  position: relative;
}

/* ===== 端の装飾（アートボード外に延長した雲・フキダシ） =====
   1000px表示では画面外。広い画面で切れずに見えるよう端を合成 */
.deco {
  position: absolute;
  pointer-events: none;
}

.deco-blob-l  { left: -1.35%;  top: 27.899%; width: 1.65%; }
.deco-cloud-r1 { right: -0.30%; top: 31.345%; width: 0.60%; }
.deco-cloud-r2 { right: -4.65%; top: 9.580%;  width: 4.95%; }
.deco-cloud-l { left: -3.35%;  top: 43.379%; width: 3.65%; }

.hotspot {
  display: block;
  position: absolute;
  z-index: 2;
}

/* A：詳しくはコチラから！（イベント） */
.hs-event {
  left: 32.845%;
  top: 51.887%;
  width: 34.405%;
  height: 9.002%;
  border-radius: 100px;
}

/* B：NEW & RENEWAL SHOP!（新店舗） */
.hs-shop {
  left: 4.607%;
  top: 71.317%;
  width: 90.379%;
  height: 20.286%;
  border-radius: 24px;
}

/* ヘッダーのAEON MALLロゴ（HP） */
.hs-hp-head {
  left: 0;
  top: 0;
  width: 20.23%;
  height: 10.726%;
}

/* C：イオンモール京都桂川ロゴ（HP） */
.hs-hp {
  left: 7.318%;
  top: 13.773%;
  width: 33.781%;
  height: 20.802%;
}

/* D：X */
.hs-x {
  left: 44.698%;
  top: 65.586%;
  width: 4.847%;
  height: 13.146%;
}

/* E：Instagram */
.hs-insta {
  left: 50.264%;
  top: 64.82%;
  width: 5.543%;
  height: 14.805%;
}