@charset "UTF-8";

/* ==========================================================================
   FAQワード検索
   FAQページ（[faq_search] を含むページ）でのみ読み込まれる

   既存コンポーネントの定義に揃える:
     入力欄       … .m-form__container label dl dd input
     サジェスト   … .p-schedule-ticket__subButton（矢印 ::after は付けない）
     ハイライト   … .m-newsListItem__label

   配色はテーマのカスタムプロパティ（build/main.css の :root）を使う。
   16進値はハードコードしない。テーマ側の色が変わったときに
   この画面だけ取り残されるのを防ぐため。

   ブレークポイントはテーマに合わせて 959px。
   SPの数値は 780px を基準幅とする clamp（テーマ共通の書式）。
   ========================================================================== */

.c-faqSearch {
  margin: 0 0 48px;
}

/* ---- 入力フォーム ---- */

.c-faqSearch__form {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* .m-form__container の input に準拠（白地・黒文字・8px角丸） */
.c-faqSearch__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 16px 48px 16px 16px; /* 右は内側のクリアボタン分 */
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  background: var(--color-white);
  border: none;
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .3s;
}

.c-faqSearch__input::placeholder {
  color: var(--color-gray);
}

/* 検索欄内のネイティブ×は自前のクリアボタンと重複するため消す */
.c-faqSearch__input::-webkit-search-cancel-button,
.c-faqSearch__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* フォーカス時はアウトラインではなく、テーマのゴールドグローをふわっと出す。
   テーマも .p-top-kv__thumb[aria-selected="true"] や .c-pic / .performance-today で
   同じトークンを box-shadow として「選択・強調」の表現に使っている。 */
.c-faqSearch__input:focus {
  outline: none;
  box-shadow: var(--shadow-gold_whitetext);
}

.c-faqSearch__input:disabled {
  opacity: .5;
  cursor: wait;
}

/* 検索欄内のクリアボタン
   絶対配置＋固定オフセットにすると、翻訳で送信ボタンのラベル幅が変わったとき
   （英語 "Search" が最長）に重なる。フレックス項目として置き、負のマージンで
   入力欄の右端に重ねることで、送信ボタンの幅から独立させる。

   margin-left は必ずボタン自身の width と同じ絶対値にすること。
   フレックスでは「外形幅 = width + margin」なので、一致していないと
   入力欄と送信ボタンの間の余白がずれる。 */
.c-faqSearch__clear {
  flex: 0 0 auto;
  align-self: center;
  width: 28px;
  height: 28px;
  margin-left: -28px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--color-gray);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.c-faqSearch__clear:hover {
  color: var(--color-black);
  opacity: 1; /* テーマの body button:hover{opacity:.7} を打ち消す */
}

.c-faqSearch__clear:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* 入力欄が白地の独立したボックスになったため、送信ボタンは結合せず隣に置く。

   テーマのCSSリセット（all: unset）が button の既定 text-align:center を
   消してしまうため、テキストは自前で中央寄せする。テーマ自身も
   .c-button--header で同じ手法（フレックスで中央寄せ）を採っている。 */
.c-faqSearch__submit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  margin-left: 8px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-deepred);
  background-image: var(--grad-gold1);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.c-faqSearch__submit:hover {
  opacity: .85;
}

.c-faqSearch__submit:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.c-faqSearch__submit:disabled {
  opacity: .5;
  cursor: wait;
}

/* ---- よく検索されるワード ---- */

.c-faqSearch__suggest {
  margin-top: 20px;
}

.c-faqSearch__suggestTitle {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-gold);
}

.c-faqSearch__suggestList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-faqSearch__suggestList li {
  margin: 0;
}

/* .p-schedule-ticket__subButton に準拠。矢印の ::after は付けない */
.c-faqSearch__suggestList button {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-white);
  background: none;
  border: 1.5px solid var(--color-white);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}

.c-faqSearch__suggestList button:hover {
  color: var(--color-deepred);
  background-color: var(--color-white);
  opacity: 1; /* テーマの body button:hover{opacity:.7} を打ち消す */
}

.c-faqSearch__suggestList button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ---- 検索結果ステータス ---- */

.c-faqSearch__status {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--color-white);
}

/* ---- ヒット箇所のハイライト ---- */

/* .m-newsListItem__label に準拠。ただし本文中のインライン要素なので
   padding は上下2px・左右4px に詰め、font-size は周囲に合わせる */
mark.c-faqSearch__hit {
  margin: 0 .2em; /* 前後の文字に詰まって見えないよう、文字サイズ基準で空ける */
  padding: 2px 4px;
  font-weight: 400;
  color: var(--color-deepred);
  background-image: var(--grad-gold1);
  border-radius: 4px;
}

/* 見出し（.m-accordion__trigger）は display:flex; justify-content:space-between;
   のため、ハイライトでテキストが分割されると各断片が独立したフレックスアイテムに
   なり、左右へ大きく広がってしまう。JS側でハイライト時にこの span で包み、
   フレックスアイテムを [span][i] の2つに戻している。

   display は指定しないこと。span の既定（inline）のままにしておくと、
   フレックス文脈では自動的にブロック化されてフレックスアイテムになり、
   非フレックス文脈ではインラインのままテキストが自然に流れる。
   display:block を付けると後者でアイコンが次の行へ落ちる。 */
.c-faqSearch__hitWrap {
  min-width: 0; /* 長いタイトルがフレックスアイテムとして縮めるように */
}

/* ---- SP（テーマのブレークポイントに合わせる） ---- */

@media (max-width: 959px) {
  .c-faqSearch {
    margin-bottom: clamp(26px, 52 / 780 * 100vw, 52px);
  }

  .c-faqSearch__input {
    padding: clamp(8px, 16 / 780 * 100vw, 16px);
    padding-right: clamp(32px, 64 / 780 * 100vw, 64px);
    font-size: clamp(14px, 28 / 780 * 100vw, 28px);
    border-radius: clamp(4px, 8 / 780 * 100vw, 8px);
  }

  .c-faqSearch__submit {
    min-width: clamp(64px, 128 / 780 * 100vw, 128px);
    padding: clamp(8px, 16 / 780 * 100vw, 16px) clamp(10px, 20 / 780 * 100vw, 20px);
    font-size: clamp(12px, 24 / 780 * 100vw, 24px);
    border-radius: clamp(4px, 8 / 780 * 100vw, 8px);
  }

  .c-faqSearch__suggestTitle {
    font-size: clamp(11px, 22 / 780 * 100vw, 22px);
  }

  .c-faqSearch__suggestList {
    gap: 8px;
  }

  .c-faqSearch__suggestList button {
    padding: clamp(6px, 12 / 780 * 100vw, 12px) clamp(8px, 16 / 780 * 100vw, 16px);
    font-size: clamp(11px, 22 / 780 * 100vw, 22px);
  }

  .c-faqSearch__status {
    font-size: clamp(12px, 24 / 780 * 100vw, 24px);
  }
}