/*    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/*  このファイルは最後に読み込まれるため、他のCSSプロパティを上書きできます。
    また、LimeSurveyのアップデートによって更新されることはありません。

    ============================================================
    カラーパレット（紫友同窓会カラー / CUD配慮）
    ============================================================
    --shiyu-main:    #756aaf  メインカラー（柔らかい紫・Webサイト準拠）
                              ナビバー背景・ボーダー・アクセント用
    --shiyu-dark:    #4a4180  ボタン背景など白文字と組み合わせる箇所
                              （白背景上でコントラスト比 約5.5:1 を確保）
    --shiyu-darker:  #2e2d8c  ホバー・アクティブ時（ロゴ色に近い濃紫）
    --shiyu-light:   #eeeef7  薄紫（背景・アクセント）
    --shiyu-border:  #b0aad6  ボーダー用（薄紫）
    --shiyu-error:   #c0392b  エラー・必須（CUD対応赤）
    --shiyu-success: #1a6e3c  成功（CUD対応濃い緑）
    ============================================================
*/

:root {
    --shiyu-main:    #756aaf;
    --shiyu-dark:    #4a4180;
    --shiyu-darker:  #2e2d8c;
    --shiyu-light:   #eeeef7;
    --shiyu-border:  #b0aad6;
    --shiyu-error:   #c0392b;
    --shiyu-success: #1a6e3c;
}


/* ============================================================
   ナビバー（ヘッダー）
   ============================================================ */

.fruity .navbar,
.fruity .navbar-default {
    background-color: var(--shiyu-main) !important;
    border-color: var(--shiyu-dark) !important;
}

.fruity .navbar-brand,
.fruity .navbar-default .navbar-brand {
    color: #fff !important;
}


/* ============================================================
   進捗バー
   ============================================================ */

.fruity .progress-bar,
.fruity .bg-primary {
    background-color: var(--shiyu-dark) !important;
}


/* ============================================================
   ボタン（次へ・送信）
   ============================================================ */

.fruity .btn-primary,
.fruity .btn-primary.disabled,
.fruity .btn-primary:disabled {
    background-color: var(--shiyu-dark) !important;
    border-color: var(--shiyu-darker) !important;
    color: #fff !important;
}

.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary:active {
    background-color: var(--shiyu-darker) !important;
    border-color: var(--shiyu-darker) !important;
    color: #fff !important;
}

/* 戻るボタン（アウトライン） */
.fruity .btn-outline-secondary {
    border-color: var(--shiyu-dark) !important;
    color: var(--shiyu-dark) !important;
    background-color: #fff !important;
}

.fruity .btn-outline-secondary:hover,
.fruity .btn-outline-secondary:focus {
    background-color: var(--shiyu-light) !important;
    border-color: var(--shiyu-darker) !important;
    color: var(--shiyu-darker) !important;
}


/* ============================================================
   はい・いいえ / ボタン型選択肢
   ============================================================ */

/* 未選択 */
.fruity .btn-check + .btn-primary {
    background-color: #fff !important;
    border-color: var(--shiyu-border) !important;
    color: var(--shiyu-dark) !important;
}

/* 選択済み */
.fruity .btn-check:checked + .btn-primary {
    background-color: var(--shiyu-dark) !important;
    border-color: var(--shiyu-darker) !important;
    color: #fff !important;
}

/* ホバー */
.fruity .btn-check + .btn-primary:hover {
    background-color: var(--shiyu-light) !important;
    border-color: var(--shiyu-dark) !important;
    color: var(--shiyu-dark) !important;
}


/* ============================================================
   質問ボーダー・アクセント
   ============================================================ */

.fruity .answer-container,
.fruity .question-help-container {
    border-color: var(--shiyu-border) !important;
}

/* 必須・エラー時の質問枠 */
.fruity .question-container.input-error {
    border-color: var(--shiyu-error) !important;
}


/* ============================================================
   テキストカラー
   ============================================================ */

/* LimeSurveyデフォルトで青・緑になる箇所をボディカラーに統一 */
.fruity .text-info,
.fruity .text-primary,
.fruity .text-success {
    color: var(--bs-body-color) !important;
}

/* エラーメッセージ（必須未回答など） */
.fruity .text-danger,
.fruity .question-valid-container .text-danger {
    color: var(--shiyu-error) !important;
}

/* 必須マーク（アスタリスク） */
.fruity .text-danger.fa-asterisk {
    color: var(--shiyu-error) !important;
}


/* ============================================================
   チェックボックス・ラジオボタン（疑似要素）
   ============================================================ */

/* チェック済み時の背景色 */
.fruity .checkbox-item input[type="checkbox"]:checked + label::before,
.fruity .radio-item input[type="radio"]:checked + label::before {
    background-color: var(--shiyu-dark) !important;
    border-color: var(--shiyu-dark) !important;
}


/* ============================================================
   リンク
   ============================================================ */

.fruity a {
    color: var(--shiyu-dark);
    text-decoration: none;
}

.fruity a:hover {
    color: var(--shiyu-darker);
    text-decoration: underline;
}


/* ============================================================
   警告メッセージ（赤背景）
   使い方：
     <div class="alert-wrapper">
       <div class="alert-container">
         <p class="alert-text">メッセージ</p>
       </div>
     </div>
   ============================================================ */

.alert-wrapper {
    display: flex;
    justify-content: center;
}

.alert-container {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
}

.alert-text {
    font-weight: bold;
    margin: 0;
}


/* ============================================================
   成功メッセージ（緑背景）
   使い方：
     <div class="success-wrapper">
       <div class="success-container">
         <p class="success-text">メッセージ</p>
       </div>
     </div>
   ============================================================ */

.success-wrapper {
    display: flex;
    justify-content: center;
}

.success-container {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
}

.success-text {
    font-weight: bold;
    margin: 0;
}


/* ============================================================
   黄色マーカー
   使い方：<span class="yellow-marker">テキスト</span>
   ============================================================ */

.yellow-marker {
    background: linear-gradient(transparent 60%, #ff6 60%);
}


/* ============================================================
   large-choice-label：チェックボックスの文字を大きくする
   使い方：質問の「CSSクラス」フィールドに large-choice-label を入力
   ============================================================ */

/* ラベルの文字サイズを2倍に */
.large-choice-label .checkbox-label {
    font-size: 2em;
}

/* 疑似チェックボックス（::before）を縦中央に配置 */
.large-choice-label .answer-item .checkbox-label::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* チェックマーク（::after）も同様に縦中央に配置 */
.large-choice-label .answer-item .checkbox-label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}


/* ============================================================
   highlight-until-checked：未チェック時に黄色ハイライト
   チェックを入れるとハイライトが消える
   使い方：質問の「CSSクラス」フィールドに highlight-until-checked を入力
   複数クラスの組み合わせ例：large-choice-label highlight-until-checked
   注意：LimeSurveyのCSSエディタで「Expected RPAREN」警告が出るが、
         :has() 疑似クラス非対応のエディタ側の問題のため無視してよい
   ============================================================ */

/* 未チェック時：黄色ハイライト */
.highlight-until-checked .answer-item {
    background-color: #fff9c4;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* 余白はBootstrapのgridレイアウト崩れを防ぐため内側のrowに指定 */
.highlight-until-checked .answer-item .row {
    padding: 4px 8px;
}

/* チェックあり → ハイライト解除 */
/* 「Expected RPAREN at line XXX, col 48.」のエラーは、エディタがhas()疑似クラス非対応のために表示されているので、無視してOK */
.highlight-until-checked .answer-item:has(input[type="checkbox"]:checked) {
    background-color: transparent;
}

/* =========================================================
   紫友同窓会 LimeSurvey 完了ページ専用スタイル
   ---------------------------------------------------------
   ■ 目的
      ・寄付申込／オンラインセミナー申込などの
        「完了ページ」のみを装飾する
      ・通常の設問画面やLimeSurvey標準ボタンには影響を与えない

   ■ 設計方針
      ・.completed-wrapper 配下のみに適用
      ・クラス名は shiyu- で統一
   ========================================================= */


/* =========================================================
   レイアウト全体
   ---------------------------------------------------------
   完了メッセージ本文を中央寄せ・最大幅制限
   ========================================================= */
.completed-wrapper .shiyu-wrap {
  max-width: 720px;      /* 横幅を読みやすいサイズに制限 */
  margin: 0 auto;        /* 中央配置 */
  line-height: 1.9;      /* ゆったりした行間 */
}


/* =========================================================
   ヒーロー（タイトルブロック）
   ---------------------------------------------------------
   完了メッセージ上部の強調エリア
   ========================================================= */
.completed-wrapper .shiyu-hero {
  text-align: center;
  margin: 18px 0 22px;
}

.completed-wrapper .shiyu-hero__icon {
  font-size: 42px;       /* アイコンを大きめに表示 */
  line-height: 1;
  margin-bottom: 10px;
}

.completed-wrapper .shiyu-hero__title {
  margin: 0;
  font-size: 1.55rem;    /* 少し大きめの見出し */
}

.completed-wrapper .shiyu-hero__lead {
  margin: 10px 0 0;
  color: #555;           /* 本文よりやや薄い色 */
}


/* =========================================================
   メインカード（発送案内など）
   ---------------------------------------------------------
   少し背景色を付けて視認性を向上
   ========================================================= */
.completed-wrapper .shiyu-card {
  background: rgba(0,0,0,.03);   /* うっすらグレー背景 */
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 16px 18px;
}


/* =========================================================
   アクションボタン（画面を閉じる）
   ---------------------------------------------------------
   LimeSurvey標準ボタンとは独立
   ========================================================= */
.completed-wrapper .shiyu-actions {
  margin-top: 12px;
  text-align: center;
}

.completed-wrapper .shiyu-btn {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  background: #5a4fcf;  /* 紫系（テーマカラー想定） */
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* ホバー時は少しだけ透明にして変化を出す */
.completed-wrapper .shiyu-btn:hover {
  opacity: 0.9;
}


/* =========================================================
   お問い合わせ情報ボックス
   ---------------------------------------------------------
   左側にアクセントラインを付けて区切りを明確化
   ========================================================= */
.completed-wrapper .shiyu-contact {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid #5a4fcf;  /* 紫のアクセント */
  border-radius: 10px;
  background: #fff;
}

.completed-wrapper .shiyu-contact__title {
  font-weight: 800;      /* セクション見出し */
  margin-bottom: 8px;
}

.completed-wrapper .shiyu-contact__org {
  font-weight: 700;      /* 団体名をやや強調 */
}


/* =========================================================
   メタ情報（メール・電話）
   ---------------------------------------------------------
   横並び＋折り返し対応
   ========================================================= */
.completed-wrapper .shiyu-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;       /* スマホでは自動折り返し */
  gap: 10px 18px;
}

.completed-wrapper .shiyu-meta__label {
  color: #666;           /* ラベルはやや薄く */
}

.completed-wrapper .shiyu-link {
  color: #5a4fcf;
  text-decoration: none;
  font-weight: 700;
}

.completed-wrapper .shiyu-link:hover {
  text-decoration: underline;
}


/* =========================================================
   補足テキスト（注記）
   ========================================================= */
.completed-wrapper .shiyu-note,
.completed-wrapper .shiyu-footnote {
  font-size: 12px;
  color: #777;
}

.completed-wrapper .shiyu-footnote {
  margin-top: 12px;
  text-align: center;
}

/* =========================================================
   アンケート完了ページ専用装飾
   ---------------------------------------------------------
   .shiyu-survey-complete が付いた場合のみ適用
   ========================================================= */

.completed-wrapper .shiyu-survey-complete .shiyu-hero__icon {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}

/* 少しだけ落ち着いた印象に（任意） */
.completed-wrapper .shiyu-survey-complete .shiyu-hero__icon {
  font-size: 40px;
}