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

html,body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  
  /* 画像が読み込まれるまでの代替色（暗めの色） */
  background-color: #e8e8e8; 
}

/* 背景拡大防止のため固定レイヤーを疑似要素で作成 */
body::before {
  content: "";
  display: block;
  position: fixed; /* 画面に対して常に固定 */
  top: 0;
  left: 0;
  width: 100vw;    /* 画面幅いっぱい */
  height: 100vh;   /* 画面の高さいっぱい */

  /* 背景画像の設定（1920x1080の画像を想定） */
  background-image: url('../img/bg.jpg'); /* 背景画像のファイル名に合わせて変更してください */
  background-size: cover;          /* 画面全体を覆うように拡大縮小 */
  background-position: center;     /* 画像の中央を基準に配置 */
  background-attachment: fixed;    /* スクロールしても背景画像を固定する */
  background-repeat: no-repeat;
  
  z-index: -1; /* 最背面表示 */
}

/* =========================================
   ラッパー
========================================= */
.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; /* などのように幅を指定してサイズ調整します */
}

/* 自動改行　*/
span {
  display: inline-block;
}

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

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

  /* インフォ外枠の調整 */
  .info-wrapper {
    padding: 5px 15px;
    margin-top: 10px;
    border-radius: 8px; /* 角丸を少し控えめに */
  }

  /* コンテンツ外枠の調整 */
  .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, .info h2 {
    font-size: 1.2em;   /* PCより少しだけ小さく */
    margin-top: 1.2em;
  }

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