@charset "UTF-8";
/* ============================================================
 * お問い合わせ（1ページ完結型）CSS
 * 設置先: public_html/assets/contact.css
 * 読み込み: $page_css = ['/assets/contact.css'];
 * 名前空間: ct-（Q&Aの見た目は fq- を流用）
 *
 * ▼方針
 *  - 幅・タイポは会員ログイン（login_entry.css / .auth__inner）準拠
 *    SP: max-width 400px / PC(768px〜): 500px
 *  - 入力欄・ボタン・チェックボックスは assets/style.css の
 *    共通部品（.form-group / .form-label / .form-input / .form-btn）に委譲
 *  - ※ 1rem = 10px（html 62.5%）。旧版は 1rem=16px 前提で書かれており
 *    文字が実寸の 2/3 になっていたため全面的に直した
 * ============================================================ */

.is-hidden { display: none !important; }

/* ------------------------------------------------------------
   ページ幅（.auth__inner 準拠）
   ------------------------------------------------------------ */
.ct-wrap {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

@media (min-width: 768px) {
  .ct-wrap {
    max-width: 500px;
    padding: 40px 20px 80px;
  }
}

/* ------------------------------------------------------------
   見出し（.auth__title / .auth__sub 準拠）
   ------------------------------------------------------------ */
.ct-title {
  font-family: var(--font-deco), 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: .1rem;
  color: var(--text-primary, #f2f2f2);
  text-align: center;
  margin: 0 0 8px;
}

.ct-sub {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--white-transparent07, rgba(255, 255, 255, .7));
  text-align: center;
  margin: 0 0 24px;
}

@media (min-width: 768px) {
  .ct-title { font-size: 3.2rem; }
}

.ct-sec-title {
  font-size: 1.4rem;
  color: var(--text-primary, #e6e0d2);
  text-align: center;
  margin: 0 0 16px;
}

/* ------------------------------------------------------------
   注意書き（.auth__notice 準拠）
   ------------------------------------------------------------ */
.ct-note {
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 0.5px solid var(--gold-border, rgba(201, 168, 108, .4));
  border-radius: 8px;
  background: rgba(201, 168, 108, .06);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--shop-text-dim, #b0a0a8);
  text-align: left;
}

.ct-note a { color: var(--gold, #c9a86c); }

/* ------------------------------------------------------------
   ① カテゴリ選択
   ------------------------------------------------------------ */
.ct-cats {
  display: grid;
  gap: 12px;
}

.ct-cat-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, .03);
  border: 0.5px solid var(--gold-border, rgba(201, 168, 108, .4));
  border-radius: 8px;
  padding: 15px 16px;
  color: var(--text-primary, #f2f2f2);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.ct-cat-btn:hover {
  border-color: var(--gold, #c9a86c);
  background: rgba(201, 168, 108, .08);
}

.ct-cat-btn::after {
  content: "\203A";
  color: var(--gold, #c9a86c);
  font-size: 2rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* 選択中の用件バー */
.ct-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(201, 168, 108, .08);
  border: 0.5px solid var(--gold-border, rgba(201, 168, 108, .4));
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: #d9c9a6;
  text-align: left;
}

.ct-chosen b {
  color: var(--text-primary, #f2f2f2);
  font-weight: 600;
}

.ct-back {
  background: none;
  border: none;
  color: var(--gold, #c9a86c);
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  text-decoration: underline;
  padding: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   ② 解決フィードバック
   ------------------------------------------------------------ */
.ct-resolve {
  margin-top: 28px;
  text-align: center;
}

.ct-resolve__q {
  color: var(--text-primary, #ddd);
  font-size: 1.4rem;
  margin: 0 0 14px;
}

.ct-resolve__btns {
  display: grid;
  gap: 12px;
}

.ct-thanks {
  margin-top: 28px;
  text-align: center;
  color: var(--white-transparent07, rgba(255, 255, 255, .7));
  font-size: 1.3rem;
  line-height: 1.9;
}

.ct-thanks p { margin: 0 0 6px; }
.ct-thanks a { color: var(--gold, #c9a86c); }

/* ------------------------------------------------------------
   ③ フォーム
   入力欄・ラベル・送信ボタンは共通部品（.form-*）に委譲。
   ここではページ固有のバッジと余白だけを持つ。
   ------------------------------------------------------------ */
.ct-form { text-align: left; }

.ct-req {
  display: inline-block;
  font-size: 1rem;
  color: #fff;
  background: #c0392b;
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: middle;
}

.ct-any {
  display: inline-block;
  font-size: 1rem;
  color: #ccc;
  background: rgba(255, 255, 255, .12);
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ハニーポット */
.ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* サーバー側エラー */
.ct-errors {
  background: rgba(180, 35, 24, .12);
  border: 0.5px solid #b42318;
  color: #fda29b;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 1.2rem;
  line-height: 1.7;
  text-align: left;
}

.ct-errors ul { margin: 0; padding-left: 1.4em; }

/* ------------------------------------------------------------
   完了画面
   ------------------------------------------------------------ */
.ct-done {
  text-align: center;
  padding: 40px 0;
}

.ct-done h2 {
  font-family: var(--font-deco), 'Cormorant Garamond', serif;
  color: var(--gold, #c9a86c);
  font-size: 2.2rem;
  font-weight: 400;
  margin: 0 0 16px;
}

.ct-done p {
  color: var(--white-transparent07, rgba(255, 255, 255, .7));
  font-size: 1.3rem;
  line-height: 1.9;
  margin: 0;
}

.ct-done a { color: var(--gold, #c9a86c); }

/* ------------------------------------------------------------
   戻るリンク（.auth__back 準拠）
   ------------------------------------------------------------ */
.ct-back-link {
  margin-top: 28px;
  font-size: 1.2rem;
  text-align: center;
}

.ct-back-link a {
  color: var(--white-transparent07, rgba(255, 255, 255, .7));
  text-decoration: none;
  transition: color .2s;
}

.ct-back-link a:hover { color: var(--gold, #c9a86c); }

/* ------------------------------------------------------------
   Q&A（アコーディオン。fq-）
   ------------------------------------------------------------ */
.fq-item {
  border: 0.5px solid var(--gold-border, rgba(201, 168, 108, .4));
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}

/* 質問（開閉ボタン） */
.fq-q {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 14px 16px;
  color: var(--text-primary, #f2f2f2);
  font-size: 1.4rem;
  line-height: 1.6;
  transition: background .2s;
}

.fq-q::before {
  content: "Q";
  color: var(--gold, #c9a86c);
  font-weight: 700;
  flex: 0 0 auto;
}

.fq-q span { flex: 1 1 auto; min-width: 0; }

.fq-q::after {
  content: "\203A";
  color: var(--gold, #c9a86c);
  font-size: 2rem;
  line-height: 1;
  flex: 0 0 auto;
  transform: rotate(90deg);
  transition: transform .2s;
}

.fq-item.is-open .fq-q::after { transform: rotate(-90deg); }
.fq-q:hover { background: rgba(201, 168, 108, .06); }

/* 回答（初期は閉じ） */
.fq-a {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  color: var(--shop-text-dim, #cfcfcf);
  font-size: 1.3rem;
  line-height: 1.85;
  background: rgba(0, 0, 0, .25);
  border-top: 0.5px solid var(--gold-border, rgba(201, 168, 108, .25));
}

.fq-a::before {
  content: "A";
  color: var(--gold, #c9a86c);
  font-weight: 700;
  flex: 0 0 auto;
}

.fq-a span { flex: 1 1 auto; min-width: 0; }
.fq-item.is-open .fq-a { display: flex; }