/* 
 * 2017-08
 * @viewport は CSS4 "Media Queries Level 4" ワーキング・ドラフト(精査中)
 * において定義されており、一部ブラウザで先行的に実装済み。
 * Android Chromeにおいて、
 * chrome://flags/#enable-experimental-web-platform-features
 * フラグを有効にすることで使用可能となる。
 * - FIXME -
 * PCなどの広画面環境へのviewport設定を回避するために
 * max-device-width 値を利用しているが、Media Queries Level 4 で
 * max-device-width は非推奨となったため、代替手段が必要。
 */
@media (max-device-width: 815px) {
  @viewport {
    /* device-width が815px以下のデバイスは縮小して全幅を表示 */
    width: 815px;  /* 815 = 本体(600)+広告(177)+余白(19x2) */
  }
}

/* 狭い画面においては、右側に広告スペースを空け、本体と被らないようにする */
@media (max-width: 815px) {
  .head, .main {
    margin-right: 185px;
  }
}