@charset "utf-8";

/* =======================================
   Smartphone adjustment
   SEO最優先 / JSなし
   viewport = device-width
   （PC幅レイアウト。自動縮小は行われない）
======================================= */
@media screen and (max-width: 768px) {

  /* -------------------------------
     Layout base
     PC幅（970px）として描画
  ------------------------------- */
  .wrapper {
    min-width: 970px;
  }

  /* body は横スクロール許可 */
  body {
    overflow-x: auto;
  }

  /* -------------------------------
     Main visual (index)
  ------------------------------- */
  #index #mainv {
    background-size: 100% auto;
    background-position: center center;
  }

  /* -------------------------------
     Footer background (SP only)
  ------------------------------- */
  #footer {
    background-image: none;
    background-color: #f5f5f5;
  }

}

/* =======================================
   iPhone Safari 専用 最適化（追記）
   - Android / PC / iPad 非対象
   - 見た目のみを補正（疑似縮小）
   - SEO影響なし
======================================= */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 480px) {

    /* iPhoneのみ疑似縮小 */
    .wrapper {
      width: 970px;
      transform: scale(0.85);
      transform-origin: top left;
    }

    /* 擬似縮小後のスクロール補正 */
    body {
      width: 970px;
      overflow-x: auto;
    }

  }
}