/*
 * 画面の狭い端末向けの上書き。
 *
 * goxi が動いている OpenPNE 3.6.2 にはスマートフォン用の画面が無い
 * （3.11 で入った機能で、goxi には存在しない）。本体の画面は
 * #Container が min-width: 950px の固定幅、中身は float による段組みで
 * 組まれているため、そのままでは携帯の画面に収まらない。
 *
 * ここでは端末を判定せず、画面の幅だけを見て上書きする。判定を使うと
 * 新しい端末が出るたびに直すことになるし、PC で窓を狭めたときにも
 * 同じ結果になるほうが確かめやすい。
 *
 * 本体の CSS（opSkinBasicPlugin/css/main.css）より後に読み込むこと。
 * 打ち消しのために !important は使わない。同じ詳細度なら後勝ちになる。
 */

/* ------------------------------------------------------------------
 * 設計幅より狭いときだけ効かせる。950px は #Container の min-width。
 * ------------------------------------------------------------------ */
@media (max-width: 949px) {

  /* 余白込みで幅を数えるようにする。これが無いと、幅 100% の指定に
     padding が足されて横にはみ出す。狭い画面の中だけに限って効かせる。 */
  #Body, #Body *, #Body *::before, #Body *::after {
    box-sizing: border-box;
  }

  /* 画像・碁盤・埋め込みが枠から出ないようにする */
  img, canvas, svg, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
  }

  /* ----------------------------------------------------------------
   * 外枠を可変にする
   * ---------------------------------------------------------------- */

  #Container {
    min-width: 0;
  }

  #HeaderContainer,
  #ContentsContainer,
  #FooterContainer {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0 8px;
  }

  /* ----------------------------------------------------------------
   * 段組みをやめて縦に積む
   *
   * LayoutA は「左に一覧・右に本文」、LayoutB は幅違いの同型、
   * LayoutC は一段。どれも float と固定幅で作られている。
   * ---------------------------------------------------------------- */

  #LayoutA,
  #LayoutB,
  #LayoutC {
    float: none;
    width: auto;
  }

  #LayoutA #Left,
  #LayoutA #Center,
  #LayoutB #Left,
  #LayoutB #Center,
  #LayoutC #Center {
    float: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* 本文を先に読ませる。横並びのときは左が目次、右が本文だが、
     縦に積むと目次が延々と続いてから本文になってしまう。 */
  #LayoutA,
  #LayoutB {
    display: flex;
    flex-direction: column;
  }

  #LayoutA #Center,
  #LayoutB #Center {
    order: 1;
  }

  #LayoutA #Left,
  #LayoutB #Left {
    order: 2;
  }

  #LayoutA #Bottom,
  #LayoutB #Bottom {
    order: 3;
  }

  #sideBanner {
    float: none;
    width: auto;
  }

  /* ----------------------------------------------------------------
   * ヘッダ
   * ---------------------------------------------------------------- */

  /* 題字は 245x80 の画像を背景に敷いている。画面に合わせて縮める。 */
  #Header h1 {
    float: none;
    width: 100%;
    max-width: 245px;
    height: 56px;
    background-size: contain;
  }

  /* 帯の広告は絶対位置で題字の右隣に置かれている。縦積みに回す。 */
  #topBanner {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin: 4px 0;
  }

  /* ----------------------------------------------------------------
   * ナビゲーション
   *
   * どちらも項目を float で横に並べている。折り返させる。
   * 指で押すものなので、高さと間隔を確保する。
   * ---------------------------------------------------------------- */

  #globalNav {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }

  #globalNav ul,
  #localNav ul {
    display: flex;
    flex-wrap: wrap;
  }

  #globalNav li,
  #localNav li {
    float: none;
  }

  #globalNav li a,
  #localNav li a {
    height: auto;
    min-height: 40px;
    line-height: 40px;
    padding: 0 12px;
  }

  /* 背景の帯画像は縦に繰り返す指定なので、折り返すと間延びする */
  #localNav ul,
  #localNav ul.friend,
  #localNav ul.community {
    background-repeat: repeat;
  }

  /* ----------------------------------------------------------------
   * 中身
   * ---------------------------------------------------------------- */

  /* 固定幅の注意書き枠 */
  .alertBox {
    width: auto;
  }

  /* 表は横に長くなりがち。枠の中だけで横に送れるようにして、
     ページ全体が横にずれないようにする。 */
  .parts table,
  .dparts table,
  #Center table {
    width: 100%;
  }

  /* 週間カレンダーは 7 列あり、狭い画面に詰めると名前が 1 文字ずつ
     折り返して読めなくなる。列の幅を確保して、この枠の中だけ横に送る。 */
  .parts table.calendar,
  .dparts table.calendar {
    width: auto;
    min-width: 700px;
  }

  table.calendar {
    display: table;
  }

  /* table そのものには overflow が効かないので、包みを作る代わりに
     親の .parts 側で送る。カレンダー以外の中身は折り返しのままでよい。 */
  .parts:has(> table.calendar),
  .dparts:has(> table.calendar) {
    overflow-x: auto;
  }

  /* 日記本文など、長い語が続くと枠から出る */
  .parts,
  .dparts,
  .block,
  .box,
  .body {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 貼られた URL がそのまま文字として入っていることが多い */
  a {
    overflow-wrap: break-word;
  }

  /* ----------------------------------------------------------------
   * 入力まわり
   * ---------------------------------------------------------------- */

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  select,
  textarea,
  .input_text,
  .input_password {
    max-width: 100%;
    /* iOS は 16px 未満の入力欄に触れると画面を勝手に拡大する。
       拡大されると戻せず、他の欄が押しにくくなる。 */
    font-size: 16px;
  }

  textarea {
    width: 100%;
  }

  /* 送信などのボタン。指で押せる大きさにする。 */
  input[type="submit"],
  input[type="button"],
  button,
  .input_submit {
    min-height: 40px;
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------
 * とくに狭い端末
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {

  #HeaderContainer,
  #ContentsContainer,
  #FooterContainer {
    padding: 0 6px;
  }

  #Header h1 {
    height: 44px;
  }

  #globalNav li a,
  #localNav li a {
    padding: 0 8px;
    font-size: 93%;
  }
}