@charset "utf-8";

/* =========================================================
   映画公開記念 イオンモールでプリキュアを探せ！キャンペーン
   基準デザイン幅：1200px（見本 aeon_SDP_web_0827.jpg）
   コンテンツ左右の内側余白：110px → 内容領域 980px
   数値はすべて 1200px / 980px に対する % で指定し、
   縮小時も見本と同じ比率でレイアウトされる。
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #113a57;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  line-height: 1.6;
  overflow-x: hidden; /* FV全幅（100vw）のはみ出しで横スクロールが出ないように */
}

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

/* ---- 全体ラッパー（背景は常にブラウザ幅いっぱい） ---- */
.wrap {
  width: 100%;
  margin: 0 auto;
  background-color: #fdf3d0;
  background-image: url("../assets/image/bg.webp");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

/* ---- ヒーロー（FVもブラウザ幅いっぱい） ---- */
.hero {
  width: 100%;
}

.hero img {
  width: 100%;
}

/* ---- コンテンツ領域（PC時は1200pxで頭打ち・中央寄せ／背景は透過して .wrap のレンガを見せる） ---- */
/* padding は .content 幅(最大1200)基準： 78 / 110 / 73 px（見本のKV下・左右・最下） */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6.5% 9.1667% 6.0833%;
}

/* 以降、子要素の margin(%) は .content の内容幅(980px)基準 */

/* ---- 各キャンペーンブロック ---- */
.campaign {
  margin: 0;
}

/* キャンペーン1 見出し下 → 期間：58px */
.campaign .heading {
  /* 見本の見出し画像は内容領域より左右 14px ずつ広い（幅1008px） */
  width: 102.857%;
  margin: 0 0 5.918% -1.4286%;
}

.campaign .heading img {
  width: 100%;
}

/* ---- 期間ピル ---- */
.term {
  margin: 0 auto;
  text-align: center;
}

.term img {
  margin: 0 auto;
}

/* キャンペーン1：期間 747px / 期間下 → 概要文 59px */
.campaign .term {
  margin-bottom: 6.020%;
}

.campaign .term img {
  width: 76.224%;
}

/* ---- 概要文（985px / 下 → 遊び方 45px） ---- */
.overview {
  margin: 0 0 4.592%;
}

.overview img {
  width: 100%;
}

/* ---- 遊び方（991px / 下 → 実施モール 69px） ---- */
.play {
  margin: 0 0 7.041%;
}

.play img {
  width: 100%;
}

/* ---- 実施モール一覧（979px） ---- */
.mall {
  margin: 0;
}

.mall img {
  width: 100%;
}

/* ---- キャンペーン2（実施モール1カード下 → 見出し2：88px） ---- */
.campaign2 {
  margin-top: 8.980%;
}

/* 見出し2 下 → 期間2：54px */
.campaign2 .heading {
  margin-bottom: 5.510%;
}

/* 期間2：887px / 期間2下 → プレゼント：70px */
.campaign2 .term {
  margin-bottom: 7.143%;
}

.campaign2 .term img {
  width: 90.510%;
}

/* ---- プレゼント案内（985px / 下 → 実施モール2：74px） ---- */
.present {
  margin: 0 0 7.551%;
}

.present img {
  width: 100%;
}

/* ---- 注意事項（728px・左寄せ / 上 62px・下 70px） ---- */
.note {
  margin: 6.327% 0 7.143%;
}

.note img {
  width: 74.286%;
}

/* ---- コピーライト（552px・中央） ---- */
.copy {
  margin: 0;
  text-align: center;
}

.copy img {
  width: 56.327%;
  margin: 0 auto;
}