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

/* ------------------------------------------------------------------
 * ナビゲーションの開閉トグル（_header.php / _layout.php が出す
 * input.navToggleCheckbox + label.navToggleLabel）。
 * 広い画面では使わないので、画面幅に関係なく常に隠しておく。
 * チェックボックスは display: none にすると Tab で辿れなくなるので、
 * 視覚的に隠すだけにする（クリップして 1px にする定番の方法）。
 * ------------------------------------------------------------------ */
.navToggleCheckbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.navToggleLabel {
  display: none;
}

/* ------------------------------------------------------------------
 * 設計幅より狭いときだけ効かせる。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;
  }

  /* ----------------------------------------------------------------
   * ナビゲーション
   *
   * globalNav・localNav とも項目を float で横に並べる作りで、
   * 全項目をそのまま置くと折り返しても縦に場所を取りすぎる。
   * 狭い画面では「メニュー」トグル（チェックボックスハック、JS 不要）
   * で畳み、タップしたときだけ開く。トグル自体は
   * #globalNav / #localNav の中に _header.php / _layout.php で
   * 用意してある（input.navToggleCheckbox + label.navToggleLabel）。
   * ---------------------------------------------------------------- */

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

  .navToggleLabel {
    display: block;
    cursor: pointer;
    margin: 6px 0;
    padding: 0 14px;
    min-height: 30px;
    line-height: 30px;
    background: #092f56;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(9, 47, 86, 0.35);
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease;
  }

  .navToggleLabel::after {
    content: "▾";
    float: right;
  }

  .navToggleCheckbox:checked + .navToggleLabel::after {
    content: "▴";
  }

  /* 押している間だけへこんで見せる。 */
  .navToggleCheckbox:active + .navToggleLabel {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(9, 47, 86, 0.35);
    background-color: #0b3d70;
  }

  /* キーボード操作時だけ見える目印。チェックボックスは視覚的に
     隠すだけで、タブ移動や Space での操作はできるようにする。 */
  .navToggleCheckbox:focus + .navToggleLabel {
    outline: 2px solid #4d90fe;
    outline-offset: 2px;
  }

  /* 畳んだ状態。トグルが無い（未ログイン等で中身が空の localNav）
     場合は常に表示のままにする。 */
  #globalNav ul,
  #localNav ul {
    display: none;
    flex-wrap: wrap;
  }

  /* #globalNav ul / #localNav ul の id つきセレクタより詳細度を
     上げる必要がある（id なしだと後ろに書いても負ける）。 */
  #globalNav .navToggleCheckbox:checked ~ ul,
  #localNav .navToggleCheckbox:checked ~ ul {
    display: flex;
  }

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

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

  /* タップした項目が分かるよう、押している間だけ薄く光らせる。 */
  #globalNav li a:active,
  #localNav li a:active {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* 背景の帯画像は縦に繰り返す指定なので、折り返すと間延びする */
  #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;
  }

  /* あしあと一覧。opAshiatoPlugin/css/ashiato.css が
     margin: 8px 40px / padding-left: 160px という
     デスクトップ幅前提の余白を持っていて、狭い画面では本文が
     右側の狭い帯に押し込められる。狭い画面だけ余白を外す。 */
  .ashiatoList div.item {
    margin: 8px 0;
  }

  .ashiatoList div.item p,
  .ashiatoList div.item ul.list {
    padding-left: 0;
  }

  /* 検索フォーム（_partsSearchFormLine.php）。
     先頭の icon_search.gif は「SEARCH」と描き込まれた古いボタン風の
     画像で、文字がつぶれて読みにくいうえに、すぐ後ろに本物の送信
     ボタン（検索）があって二重なので隠す。
     li は main.css で display: inline のため、テキスト入力の幅が
     広いと選択欄・送信ボタンが次の行に折り返される。ul を flex に
     して一列に並べ、テキスト入力を縮められるようにする。 */
  .searchFormLine ul li:first-child {
    display: none;
  }

  .searchFormLine ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
  }

  /* flex の対象は ul の直接の子である li 自身。中の input/select に
     flex を指定しても li 自体は content 幅のまま縮まないため、
     li 側に指定する（2番目=テキスト入力、3番目=選択欄、
     4番目=送信ボタン。1番目はアイコンで非表示）。 */
  .searchFormLine ul li:nth-child(2) {
    flex: 1 1 0%;
    min-width: 0;
  }

  .searchFormLine ul li:nth-child(3) {
    flex: 0 1 auto;
    min-width: 64px;
  }

  .searchFormLine ul li:nth-child(4) {
    flex: 0 0 auto;
  }

  .searchFormLine input.input_text {
    width: 100%;
    min-width: 0;
  }

  .searchFormLine select {
    max-width: 100%;
    min-width: 0;
  }

  /* informationBox も同じパターン。icon_information.gif は
     「▶INFORMATION」と描き込まれた画像で、左に102px確保する作りに
     なっており、狭い画面では横幅の3割近くを無駄にする。画像を消し、
     短いラベル「Info」に置き換える。 */
  .informationBox {
    padding-left: 0;
    background-image: none;
  }

  .informationBox::before {
    content: "Info";
    display: inline-block;
    margin: 4px 0 0 4px;
    padding: 2px 8px;
    background: #092f56;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
  }

  /* メッセージ一覧（pc_frontend の実際のラッパーは .messageList では
     なく .searchResultList。message.css の .messageList col.* は
     このページには掛からない）。
     main.css の「.searchResultList th { width: 90px; }」が全列の
     ヘッダーに一律90pxを割り当てるため、アイコン列・チェックボックス
     列もそれぞれ90px（合計180px）取ってしまい、件名の取り分を奪う。
     table-layout: fixed でも、実際のブラウザは col の明示幅より
     先頭行のセル幅を優先する（仕様上は col が先のはずだが、ここでは
     セル側が勝つ）ため、col ではなく th/td 側に直接指定する。
     件名セルにクラスが無いため列の並び順（1〜4番目）で指定する。 */
  .searchResultList table th:nth-child(1),
  .searchResultList table th:nth-child(2),
  .searchResultList table td:nth-child(1),
  .searchResultList table td:nth-child(2) {
    width: 28px;
  }

  .searchResultList table th:nth-child(3),
  .searchResultList table td:nth-child(3) {
    width: 90px;
  }

  .searchResultList table th:nth-child(5),
  .searchResultList table td:nth-child(5) {
    width: 64px;
  }

  /* 件名列は main.css の th{width:90px} がここにも掛かっており、
     auto にしないと table-layout: fixed が余った幅を全列に比例配分
     してしまい、件名列だけが広がらない。明示的に auto に戻す。 */
  .searchResultList table th:nth-child(4),
  .searchResultList table td:nth-child(4) {
    width: auto;
  }

  .searchResultList table td:nth-child(4) span {
    white-space: normal;
  }

  /* ----------------------------------------------------------------
   * 入力まわり
   *
   * 元のボタン・入力欄は本体 main.css の素朴な見た目（角丸なし・
   * 影なし、OS 標準のボタン外見そのまま）で、指で押す画面としては
   * もっさりして見える。狭い画面のときだけ、角丸・影・押下時の
   * フィードバックを足してモダンな見た目にする。色は既存のヘッダー
   * 紺色（#092f56）を基調に揃え、サイトの配色は変えない。
   * ---------------------------------------------------------------- */

  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;
    padding: 4px 10px;
    border: 1px solid #ccc;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="search"]:focus,
  input[type="url"]:focus,
  select:focus,
  textarea:focus,
  .input_text:focus,
  .input_password:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.25);
  }

  textarea {
    width: 100%;
  }

  /* 送信などのボタン。角は立てたまま、縦方向だけ薄くする。 */
  input[type="submit"],
  input[type="button"],
  button,
  .input_submit {
    min-height: 30px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    /* main.css の .input_submit は背景に光沢のグラデーション画像
       （bg_button.gif）を敷いており、background-color だけでは
       消えずに上から透けて見える。background-image も明示的に消す。 */
    background-color: #092f56;
    background-image: none;
    border: none;
    box-shadow: 0 2px 4px rgba(9, 47, 86, 0.35);
    -webkit-appearance: none;
    appearance: none;
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease;
  }

  /* 押している間だけへこんで見せる。タップしたと分かる手応え。 */
  input[type="submit"]:active,
  input[type="button"]:active,
  button:active,
  .input_submit:active {
    transform: scale(0.97);
    box-shadow: 0 1px 2px rgba(9, 47, 86, 0.35);
    background-color: #0b3d70;
  }

  /* いいねボタン（opNicePlugin）。nice.css の
     form#NiceForm input / form.NiceDeleteForm input が id つきで
     background: transparent を指定しており、上のボタン共通スタイルの
     白文字色だけが生き残って、透明な背景の上に白文字が乗り
     「白塗り」で何も見えなくなっていた。本来はリンクのような
     下線つきの文字なので、そのスタイルに戻す。 */
  form#NiceForm input,
  form.NiceDeleteForm input {
    min-height: 0;
    padding: 0;
    color: #026cd1;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: normal;
  }

  form#NiceForm input:active,
  form.NiceDeleteForm input:active {
    transform: none;
    box-shadow: none;
    background: transparent;
    color: #76afe6;
  }
}

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

@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%;
  }
}