/*
 * FAQ（お買い物ガイド）本文用のスタイル。
 *
 * 本文HTMLは Zendesk から移設したものをそのまま保持しているため、
 * wysiwyg-* クラスがそのまま残る。実測14種に対応する定義をここに置く。
 * text13 / mB15 は ZUTTO 本体のCSSクラスなのでここでは定義しない
 * （/guide は ZUTTO のレイアウトに載るため、そちらで効く）。
 *
 * Phase 2 では管理画面のプレビューだけが読む。Phase 3 の公開画面でも同じものを使う。
 */

#guide_body {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  word-wrap: break-word;
}

#guide_body p { margin: 0 0 1em; }
#guide_body h3 { font-size: 18px; font-weight: bold; margin: 1.6em 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid #ddd; }
#guide_body h4 { font-size: 15px; font-weight: bold; margin: 1.2em 0 0.5em; }
#guide_body hr { border: 0; border-top: 1px solid #e0e0e0; margin: 1.6em 0; }
#guide_body ul, #guide_body ol { margin: 0 0 1em 1.6em; }
#guide_body li { margin-bottom: 0.3em; }

/* 本文中のリンクの見え方を Zendesk に揃える：通常は下線なし、ホバーで下線。色は据え置き。
 *
 * SP共通CSS（/smh/common/css/base.css:39,44）の a:link / a:visited は詳細度 (0,1,1)。
 * こちらは (1,1,1) なので PC・SP とも打ち消せる。
 *
 * border を明示的に 0 にしているのは、共通CSS由来の枠線（ボタン用の border 指定など）が
 * 本文のリンクに乗った場合に、テキストの上下に線として出るのを防ぐため。
 * 共通CSSは他画面が依存しているので触らない。 */
#guide_body a,
#guide_body a:link,
#guide_body a:visited {
  color: #0b6ca8;
  text-decoration: none;
  border: 0;
}
#guide_body a:hover,
#guide_body a:active,
#guide_body a:focus {
  color: #0b6ca8;
  text-decoration: underline;
}

/* 🔴 下線がテキストから離れて上に出る問題への対処
 *
 * /stylesheets/base.css のリセットが
 *   html, body, div, span, ... a, ... { vertical-align: top; }
 * という長いセレクタで a と span の両方に vertical-align: top を当てている。
 * 本文のリンクは <a><span class="wysiwyg-font-size-medium">…</span></a> の形が多く、
 * span のフォントサイズが本文と違うと span の行ボックスが行の上端に張り付き、
 * グリフだけが持ち上がって、a が引く下線がテキストから離れて見える。
 * border でも overline でもないため、border 指定を探しても見つからない。
 *
 * #guide_body 配下のインライン要素だけ baseline に戻す。
 * ⚠ td / th 自体には当てない。リセットの vertical-align: top はセル内の
 *   上寄せに効いており、表のレイアウトが変わってしまうため
 *   （faq.css の #guide_body th, #guide_body td 側で top を明示している）。 */
#guide_body a,
#guide_body a span,
#guide_body p span,
#guide_body td span {
  vertical-align: baseline;
}

/* 上と同じ理由。実測でフォントサイズ指定を持つ span の親は
 * p 133 / td 37 / li 18 / a 9 / span 2 / th 1 だったため、
 * 指定漏れになる li・入れ子 span・th の中の span も同じ扱いにする。
 * （ここでも th 自体には当てない） */
#guide_body li span,
#guide_body th span,
#guide_body span span {
  vertical-align: baseline;
}
#guide_body img { max-width: 100%; height: auto; }
#guide_body pre { white-space: pre-wrap; word-break: break-all; background: #f7f7f7; padding: 10px; }

/* 表：93記事に対してテーブルが121個あり、そのままではSPで横に崩れる。
   figure.wysiwyg-table が付いているものはラッパーとして横スクロールさせ、
   裸のテーブルは表示自体をブロック化して横スクロールさせる。 */
#guide_body figure.wysiwyg-table,
#guide_body figure.wysiwyg-table-resized {
  margin: 0 0 1.2em;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#guide_body table {
  border-collapse: collapse;
  max-width: 100%;
}
#guide_body th,
#guide_body td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  vertical-align: top;
}
#guide_body th { background: #f5f5f5; font-weight: bold; text-align: left; }

/* 🔴 見出しの帯が内容幅までしか塗られない問題への対処
 *
 * Zendesk の本文は「1セルだけのテーブル」を見出しの帯として使っている
 * （実測：テーブル121個のうち120個が1セル。3列の本物の表は1個だけ）。
 * 帯は必ず <figure class="wysiwyg-table" style="width: 100%"> に包まれているが、
 * 中の <table> には幅指定が無い（実測：121個すべて width 指定なし）。
 * Zendesk 側はヘルプセンターのテーマCSSで表を figure 幅いっぱいに広げていたため、
 * その指定が無い移設先では表が内容幅まで縮み、帯がボタンのように見えてしまう。
 *
 * ＝ 原因は h3 ではなく table。本文中の h3 は14個あるがいずれも id 属性だけで、
 *    背景色や padding のインラインスタイルは持っていない。
 *
 * SP用の `#guide_body table { display: block }`（横スクロール用）に負けないよう
 * display も明示する。詳細度は (1,1,2) > (1,0,1) なのでメディアクエリの内外を問わず勝つ。
 * なお figure 側に overflow-x: auto があるため、横スクロールはそちらで担保される。 */
#guide_body figure.wysiwyg-table > table,
#guide_body figure.wysiwyg-table-resized > table {
  display: table;
  width: 100%;
}

/* 本文中の見出しは必ず全幅のブロックにする。
 * ZUTTO 共通CSSの h3 指定（#ttl / .midashi18 など）を巻き込まないよう
 * #guide_body 配下に限定して当てる。 */
#guide_body h3,
#guide_body h4 {
  display: block;
  width: auto;
  float: none;
}

@media screen and (max-width: 767px) {
  #guide_body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Zendesk エディタ由来のクラス（実測14種） */
#guide_body .wysiwyg-font-size-small  { font-size: 12px; }
#guide_body .wysiwyg-font-size-medium { font-size: 14px; }
#guide_body .wysiwyg-font-size-large  { font-size: 18px; }
#guide_body .wysiwyg-underline        { text-decoration: underline; }
#guide_body .wysiwyg-color-red        { color: #d93025; }
#guide_body .wysiwyg-indent1          { padding-left: 30px; }
#guide_body .wysiwyg-indent2          { padding-left: 60px; }
#guide_body .wysiwyg-indent3          { padding-left: 90px; }
#guide_body .wysiwyg-image,
#guide_body .wysiwyg-image-resized    { max-width: 100%; height: auto; }
#guide_body .wysiwyg-list-bold        { font-weight: bold; }
#guide_body .wysiwyg-list-color       { color: var(--wysiwyg-list-marker-color, #333); }

@media screen and (max-width: 767px) {
  #guide_body .wysiwyg-indent1 { padding-left: 10px; }
  #guide_body .wysiwyg-indent2 { padding-left: 20px; }
  #guide_body .wysiwyg-indent3 { padding-left: 30px; }
}

/* ------------------------------------------------------------------
 * ここから下は公開画面 /guide 配下のページ用（Phase 3）。
 * PC・SP で同じファイルを読むため、幅は % 指定＋メディアクエリで切り替える。
 * ------------------------------------------------------------------ */

.faq-search {
  margin: 0 0 30px;
}

/* 検索フォームは本文幅いっぱいだと間延びするため 600px で頭打ちにして中央寄せ。
 * width: 100% と併用しているので、600px 未満の画面では画面幅に追従する（SPは全幅）。
 *
 * 🔴 幅を決めるのはボタンではなくラッパーの span.hide_ 側。
 *    submit_tag は html_tag_helper.rb で <span class="hide_"> に包まれ、さらに
 *    /javascripts/loading.js が「全フォームの submit」で .hide_ の中身を
 *    ローディングGIFの <input type="image"> に差し替える（サイト共通の挙動）。
 *    ボタン側に幅を持たせていると、差し替えの瞬間にその指定ごと消えて
 *    レイアウトが一瞬崩れる。差し替えで消えないラッパー側に幅と境界線を持たせる。
 *    共通CSS・loading.js は他画面が依存しているため変更しない。 */
.faq-search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: #fff;
}

/* 入力欄。セレクタに型（input[type="text"]）とクラスを重ねて詳細度を (0,3,1) にしてある。
 * 共通CSSの input[type="text"] への幅指定（SPの
 * #content [id$="-content"] input[type="text"] { width: 96% } など）に
 * width の固定値を残されるとフレックスの基準幅がそれになってしまうため、
 * width: auto をこちら側で確実に効かせる。 */
.faq-search-form .faq-search-input,
.faq-search-form input[type="text"].faq-search-input {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  float: none;
  width: auto;
  max-width: none;
  /* フレックスアイテムの既定 min-width:auto だと input が固有幅より縮まず
     ボタンを押し出してしまう */
  min-width: 0;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 0;
  /* iOS は 16px 未満の入力欄でフォーカス時に自動ズームするため下げない */
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  position: static;
}

/* ボタンのラッパー。幅を持つのはボタンではなくこちら
 * （送信時に loading.js が .hide_ の中身を差し替えるため、
 *   ボタン側に幅を置くと差し替えの瞬間に指定ごと消える）。 */
.faq-search-form > .hide_ {
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
  width: 80px;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-left: 1px solid #ccc;
  /* span 内の改行・インデントが幅や高さを作らないようにする */
  font-size: 0;
  line-height: 0;
  text-align: center;
  position: static;
}
/* 送信時に差し込まれるローディングGIFが 80px からはみ出さないようにする */
.faq-search-form > .hide_ img,
.faq-search-form > .hide_ input[type="image"] {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  vertical-align: middle;
}

/* ボタン本体はラッパーいっぱいに広げる。高さも 100% にして入力欄と上下を揃える。 */
.faq-search-form .faq-search-button,
.faq-search-form input[type="submit"].faq-search-button {
  float: none;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 0 4px;
  border: 0;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.faq-search-form .faq-search-button:hover { background: #555; }

/* カテゴリのボタン一覧。PC 3列 / SP 1列 */
.faq-category-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -1% 30px;
}
.faq-category-button {
  display: block;
  box-sizing: border-box;
  width: 31.333%;
  margin: 0 1% 16px;
  padding: 22px 18px;
  border: 1px solid #ccc;
  background: #fff;
  color: #222;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.faq-category-button:hover {
  border-color: #333;
  background: #fafafa;
  text-decoration: none;
}
.faq-category-name {
  display: block;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
}
.faq-category-meta {
  display: block;
  margin-top: 6px;
  color: #888;
  font-size: 12px;
  line-height: 1.6;
}

/* カテゴリページ：セクション見出し＋記事リンク */
.faq-section-block { margin: 0 0 34px; }
.faq-section-title {
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid #333;
  color: #222;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
.faq-article-links { margin: 0; padding: 0; list-style: none; }
.faq-article-links li { border-bottom: 1px solid #e5e5e5; }
.faq-article-links li a {
  display: block;
  padding: 12px 4px 12px 16px;
  color: #222;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  position: relative;
}
.faq-article-links li a:before {
  content: "›";
  position: absolute;
  left: 2px;
  color: #999;
}
.faq-article-links li a:hover { background: #fafafa; text-decoration: underline; }

/* 記事ページ */
.faq-article-head { margin: 0 0 22px; padding: 0 0 14px; border-bottom: 1px solid #ddd; }
.faq-article-title { margin: 0; color: #222; font-size: 20px; font-weight: bold; line-height: 1.5; }
.faq-article-category { margin: 0 0 6px; color: #888; font-size: 12px; }
.faq-article-foot { margin: 34px 0 0; padding: 18px 0 0; border-top: 1px solid #ddd; }

/* 検索結果 */
.faq-search-summary { margin: 0 0 18px; color: #555; font-size: 13px; }
.faq-result-list { margin: 0; padding: 0; list-style: none; }
.faq-result-list li { padding: 16px 0; border-bottom: 1px solid #e5e5e5; }
.faq-result-title { font-size: 15px; font-weight: bold; line-height: 1.5; }
.faq-result-path { margin: 4px 0 0; color: #888; font-size: 12px; }
.faq-result-excerpt { margin: 6px 0 0; color: #555; font-size: 13px; line-height: 1.7; }
.faq-empty {
  margin: 0 0 24px;
  padding: 18px;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  line-height: 1.8;
}

/* 左カラムのカテゴリナビ（PCのみ） */
.faq-side-nav { margin: 0 0 24px; padding: 0; list-style: none; }
.faq-side-nav li { border-bottom: 1px solid #eee; }
.faq-side-nav li a {
  display: block;
  padding: 9px 2px;
  color: #333;
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
}
.faq-side-nav li a:hover { text-decoration: underline; }
.faq-side-nav li.is-current a { font-weight: bold; color: #000; }

@media screen and (max-width: 767px) {
  .faq-search { margin: 0 0 20px; }
  .faq-category-grid { margin: 0 0 20px; display: block; }
  .faq-category-button { width: 100%; margin: 0 0 10px; padding: 16px 14px; }
  .faq-article-title { font-size: 17px; }

  /* --- 検索フォームの上書き（SP固有） --------------------------------
   * ベース側で flex・ボタン80px・入力欄16px は指定済み。ここで書くのは
   * SP共通CSS（/smh/common/css/common.css:549,651）の
   *   #content [id$="-content"] input[type="text"]   { width: 96%; }
   *   #content [id$="-content"] input[type="submit"] { width: 100%; }
   * に勝つぶんと、SP用の余白調整だけ。
   * SPビューの外枠が <div id="guide-content"> でこれに一致してしまうため、
   * 詳細度 (1,2,1) に勝つよう同じ祖先＋タイプ＋クラスまで書く。
   * SP共通CSSは他画面が依存しているため触らない。 */
  #content [id$="-content"] input[type="text"].faq-search-input {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    float: none;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    font-size: 16px;
    box-sizing: border-box;
  }
  #content [id$="-content"] input[type="submit"].faq-search-button {
    float: none;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
  }

  /* --- リンクの下線を消す -----------------------------------------------
   * SP共通CSS（/smh/common/css/base.css:39,44）の
   *   a:link / a:visited { text-decoration: underline; }
   * がサイト全体に掛かっている。サイト全体の仕様なので共通CSSは触らず、
   * FAQ側だけ打ち消す。a:link は詳細度 (0,1,1) なので、
   * クラスだけでは勝てず擬似クラスまで含めて指定する。
   * 記事本文（#guide_body）の中は文中リンクなので下線を残す。 */
  .faq-category-button:link,
  .faq-category-button:visited,
  .faq-article-links li a:link,
  .faq-article-links li a:visited,
  .faq-result-title a:link,
  .faq-result-title a:visited,
  .faq-article-category a:link,
  .faq-article-category a:visited,
  .faq-section-title a:link,
  .faq-section-title a:visited,
  .faq-side-nav li a:link,
  .faq-side-nav li a:visited {
    text-decoration: none;
  }
  /* 記事本文の中のリンクは PC と同じ扱い（通常は下線なし・ホバーで下線）。
     上の #guide_body a:link / :visited が詳細度 (1,1,1) で
     SP共通CSSの a:link (0,1,1) に勝つため、ここで追加の指定は要らない。 */
}