/* =========================================
   ベース設定と固定背景
========================================= */
@import url(./header.css);
@import url(./button.css);
@import url(./link.css);
@import url(./content.css);

html {
  /* スマホによる文字サイズの自動調整を無効にする */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  
  /* 背景画像の設定（1920x1080の画像を想定） */
  background-image: url('../img/bg.jpg'); /* 背景画像のファイル名に合わせて変更してください */
  background-size: cover;          /* 画面全体を覆うように拡大縮小 */
  background-position: center;     /* 画像の中央を基準に配置 */
  background-attachment: fixed;    /* スクロールしても背景画像を固定する */
  background-repeat: no-repeat;
  
  /* 画像が読み込まれるまでの代替色（暗めの色） */
  background-color: #e8e8e8; 
}

/* =========================================
   ラッパー
========================================= */
.wrapper {
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center; /* 中身（メインビジュアルやコンテンツ）を中央揃えにする */
  width: 900px;
  min-height: 100vh;
}

/* =========================================
   メインビジュアル（画像配置用）
========================================= */
.main-visual {
  width: 100%;
  height: 400px;
  position: relative; /* 内部の画像を自由な位置に配置する（絶対配置）ための基準点にする */
  margin-bottom: 1em;
  overflow: hidden;   /* はみ出した画像を隠す場合（不要なら削除OK） */
}

/* メインビジュアル内の画像配置サンプル 
  ※ top, left, bottom, right の数値を変えることで、300pxの枠内で自由に動かせます。
*/
.mv-title-sub {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%); /* ど真ん中に配置する定番の記述 */
  width: 600px; /* などのように幅を指定してサイズ調整します */
}

.mv-title-big {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 400px; /* などのように幅を指定してサイズ調整します */
}

.mv-title-small {
  position: absolute;
  top: 30%;
  left: 42%;
  width: 250px; /* などのように幅を指定してサイズ調整します */
}

.mv-character {
  position: absolute;
  top: 0%;    /* 下端にピッタリ合わせる */
  right: 0%;   /* 右から15%の位置に配置 */
  width: 600px; /* などのように幅を指定してサイズ調整します */
}



/* =========================================
   スマホ向けメディアクエリ (767px以下)
========================================= */
@media screen and (max-width: 767px) {
  
  /* ベース設定の調整 */
  body {
    /* iOSなどで背景固定がガタつく場合があるため、必要に応じてスクロールに */
    /* background-attachment: scroll;  */
  }

  /* ラッパーの固定幅を解除 */
  .wrapper {
    width: 100%;
    padding: 0 10px; /* 左右に最低限の余白を確保 */
    box-sizing: border-box;
  }

  /* コンテンツ外枠の調整 */
  .content-wrapper {
    padding: 25px 15px; /* 40pxだとスマホでは広すぎるため縮小 */
    margin-top: 30px;   /* シールがヘッダー等と被らないよう調整 */
    border-radius: 8px; /* 角丸を少し控えめに */
  }

  /* 貼りつく画像（シール）のサイズ調整 */
  .content-image-stick {
    width: 120px;       /* 200pxはスマホでは大きいためリサイズ */
    height: 60px;
    top: -25px;         /* 飛び出し量を調整 */
    left: 10px;
  }

  /* コンテンツ内のテキスト微調整 */
  .content h2 {
    font-size: 1.2em;   /* PCより少しだけ小さく */
  }

  .content p {
    font-size: 0.95em;
    line-height: 1.5;
  }

  /* もしボタンwrapperを使っている場合は2列にする設定（以前の回答より） */
  .button-item {
    width: calc((100% - 10px) / 2) !important;
  }
}