/*-----------------------*/
     modal表示
/*-----------------------*/
.confirm-modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.55);
    z-index:9999;
}

.confirm-modal.hidden {
    display:none;
}

.modal-content {
    width:min(900px,90%);
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:10px;
    padding:30px;
}

body.modal-open {
    overflow:hidden;
}
    
.confirm-modal {
    position: fixed ;/*!important*/
    inset: 0 ;
    display: flex ;/*!important*/
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.55);
    z-index: 9999;
}



    /* ----------------------------------
     * デザインシステム（CSS変数定義）
     * ---------------------------------- */
    :root {
      --bg-body: #f8fafc;         /* slate-50 */
      --bg-card: #ffffff;         /* white */
      --bg-alt: #f8fafc;          /* slate-50/50 */
      
      --text-main: #1e293b;       /* slate-800 */
      --text-dark: #020617;       /* slate-950 */
      --text-muted: #64748b;      /* slate-500 */
      --text-light: #94a3b8;      /* slate-400 */
      
      --primary: #2563eb;         /* blue-600 */
      --primary-hover: #1d4ed8;   /* blue-700 */
      --primary-light: #eff6ff;   /* blue-50 */
      
      --border-color: #e2e8f0;    /* slate-200 */
      --border-light: #f1f5f9;    /* slate-100 */
      
      --required: #ef4444;        /* red-500 */
      --optional: #94a3b8;        /* slate-400 */
      
      --success: #059669;         /* emerald-600 */
      --success-bg: #d1fae5;      /* emerald-100 */
      
      --warning: #b45309;         /* amber-700 */
      --warning-bg: #fffbeb;      /* amber-50 */
      --warning-border: #fde68a;  /* amber-200 */
      
      --font-sans: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    }

    /* ----------------------------------
     * ベースリセット（ページ埋め込み用）
     * ---------------------------------- */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-sans);
      background-color: var(--bg-body);
      color: var(--text-main);
      line-height: 1.5;
      padding: 1rem 0;
      -webkit-font-smoothing: antialiased;
    }

    /* ----------------------------------
     * レイアウト & コンテナ
     * ---------------------------------- */
    .form-container {
      max-width: 48rem; /* max-w-3xl */
      margin: 0 auto;
      padding: 0 0.75rem;
    }

    @media (min-width: 480px) {
      .form-container {
        padding: 1rem 1rem 0 ;
      }
    }

    /* ----------------------------------
     * タイトル部
     * ---------------------------------- */
    .title-section {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .main-title {
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--text-dark);
      margin-bottom: 0.5rem;
    }

    @media (min-width: 480px) {
      .main-title {
        font-size: 1.75rem;
      }
    }

    .sub-title {
      font-size: 0.8125rem;
      color: var(--text-muted);
    }

    @media (min-width: 480px) {
      .sub-title {
        font-size: 0.9375rem;
      }
    }

    /* ----------------------------------
     * フォームカード・セクション
     * ---------------------------------- */
    .contact-form {
      background-color: var(--bg-card);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      border-radius: 1rem;
      border: 1px solid var(--border-light);
      overflow: hidden;
    }

    .form-section {
      padding: 1.25rem;
      border-bottom: 1px solid var(--border-light);
    }

    @media (min-width: 480px) {
      .form-section {
        padding: 1.75rem;
      }
    }

    .form-section-bg {
      background-color: var(--bg-alt);
    }

    .section-title {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--text-dark);
      display: flex;
      align-items: center;
      margin-bottom: 1.25rem;
    }

    .section-indicator {
      width: 0.375rem;
      height: 1.25rem;
      background-color: var(--primary);
      border-radius: 9999px;
      margin-right: 0.625rem;
      display: inline-block;
    }

    /* ----------------------------------
     * ラベル・バッジ
     * ---------------------------------- */
    .form-label-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 0.375rem;
      flex-shrink: 0;
    }

    .badge {
      font-size: 0.625rem;
      font-weight: 700;
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
      color: #ffffff;
      margin-right: 0.5rem;
      display: inline-block;
      flex-shrink: 0;
    }

    .badge-required {
      background-color: var(--required);
    }

    .badge-optional {
      background-color: var(--optional);
    }

    .field-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-dark);
      white-space: nowrap;
    }

    .field-label-large {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-dark);
    }

    /* ----------------------------------
     * 入力要素 (Input / Textarea)
     * ---------------------------------- */
    .input-field {
      width: 100%;
      border-radius: 0.5rem;
      border: 1px solid #cbd5e1; /* border-slate-300 */
      padding: 0.5rem 0.75rem; /* 0.5rem 0.75rem */
      font-size: 0.875rem;
      color: var(--text-main);
      outline: none;
      transition: all 0.2s ease-in-out;
    }

    .input-field:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary);
    }

    .input-field::placeholder {
      color: var(--text-light);
    }

    textarea.input-field {
      resize: vertical;
    }

    /* ----------------------------------
     * 横並びフォームグループ (スマホ480px以上でレイアウト制御)
     * ---------------------------------- */
    .form-group-horizontal {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      margin-bottom: 1rem;
    }

    .form-group-horizontal:last-child {
      margin-bottom: 0;
    }

    .input-wrapper {
      flex-grow: 1;
      width: 100%;
    }

    /* スマホ480px以上で項目名と入力欄を横並びに配置 */
    @media (min-width: 480px) {
      .form-group-horizontal {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
      }

      .form-group-horizontal .form-label-wrapper {
        width: 8.5rem; /* 480px画面で収まりが良いラベル幅 */
        margin-bottom: 0;
      }
    }

    /* ----------------------------------
     * チェックボックス・グリッド
     * ---------------------------------- */
    .checkbox-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.625rem;
      margin-top: 0.625rem;
    }

    .checkbox-grid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.625rem;
      margin-top: 0.625rem;
    }

    @media (min-width: 480px) {
      .checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .checkbox-grid-span-2 {
        grid-column: span 2 / span 2;
      }
      .checkbox-grid3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }


    .checkbox-card {
      display: flex;
      align-items: start;
      padding: 0.625rem;
      border-radius: 0.5rem;
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
    }

    .checkbox-card:hover {
      background-color: var(--bg-body);
    }

    .checkbox-input {
      margin-top: 0.2rem;
      margin-right: 0.625rem;
      height: 1.125rem;
      width: 1.125rem;
      accent-color: var(--primary);
    }

    .checkbox-text {
      font-size: 0.8125rem;
      font-weight: 500;
      color: #334155; /* slate-700 */
    }

    .zip-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .zip-symbol {
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    .input-zip {
      width: 8.5rem;
    }

    .zip-hint-sub {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* ----------------------------------
     * アクションエリア（リセット & 確認ボタン）
     * ---------------------------------- */
    .action-section {
      padding: 1.25rem;
      background-color: #f1f5f9; /* slate-100 */
      border-top: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.75rem;
    }

    @media (min-width: 480px) {
      .action-section {
        padding: 1.5rem;
        flex-direction: row;
        gap: 1rem;
      }
    }

    /* ----------------------------------
     * ボタン全般
     * ---------------------------------- */
    .btn {
      width: 100%;
      padding: 0.875rem 2rem;
      font-weight: bold;
      border-radius: 0.75rem;
      cursor: pointer;
      border: none;
      transition: all 0.2s ease-in-out;
      text-align: center;
      font-size: 0.9375rem;
    }

    .btn:active {
      transform: scale(0.98);
    }

    @media (min-width: 480px) {
      .btn {
        width: auto;
      }
    }

    .btn-primary {
      background-color: var(--primary);
      color: #ffffff;
      box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
    }

    .btn-primary:hover {
      background-color: var(--primary-hover);
      box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
    }

    .btn-secondary {
      background-color: #ffffff;
      color: #334155;
      border: 1px solid var(--border-color);
    }

    .btn-secondary:hover {
      background-color: var(--bg-body);
    }

    /* ----------------------------------
     * エラー表現
     * ---------------------------------- */
    .error-text {
      color: var(--required);
      font-size: 0.75rem;
      margin-top: 0.375rem;
      font-weight: 500;
    }

    .hidden {
      display: none !important;
    }

    /* ----------------------------------
     * ステップ表示カード (埋め込み対応)
     * ---------------------------------- */
    .step-card {
      background-color: var(--bg-card);
      border-radius: 1rem;
      border: 1px solid var(--border-light);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }

    .step-header {
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border-light);
      background-color: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .step-header-title {
      font-size: 1rem;
      font-weight: bold;
      color: var(--text-dark);
    }

    .step-header-badge {
      font-size: 0.75rem;
      color: var(--primary);
      background-color: var(--primary-light);
      padding: 0.25rem 0.625rem;
      border-radius: 9999px;
      font-weight: 500;
    }

    .step-body {
      padding: 1.25rem;
      font-size: 0.875rem;
      line-height: 1.6;
    }

    @media (min-width: 480px) {
      .step-body {
        padding: 1.75rem;
      }
    }

    .warning-banner {
      font-size: 0.75rem;
      color: var(--warning);
      text-align: center;
      background-color: var(--warning-bg);
      border: 1px solid var(--warning-border);
      border-radius: 0.5rem;
      padding: 0.5rem;
      margin-bottom: 1.25rem;
    }

    .confirm-grid {
      border: 1px solid var(--border-color);
      border-radius: 0.75rem;
      overflow: hidden;
    }

    .confirm-row {
      display: grid;
      grid-template-columns: 1fr;
      padding: 0.875rem;
      gap: 0.375rem;
      border-bottom: 1px solid var(--border-light);
    }

    .confirm-row:last-child {
      border-bottom: none;
    }

    @media (min-width: 480px) {
      .confirm-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
      }
    }

    .confirm-label {
      font-weight: 600;
      color: var(--text-dark);
    }

    @media (min-width: 480px) {
      .confirm-label {
        grid-column: span 1 / span 1;
      }
    }

    .confirm-value {
      color: #334155;
    }

    @media (min-width: 480px) {
      .confirm-value {
        grid-column: span 2 / span 2;
      }
    }

    .confirm-value-bold {
      font-weight: 500;
      color: #0f172a;
    }

    .confirm-value-empty {
      color: var(--text-light);
      font-style: italic;
    }

    .confirm-list {
      list-style: none;
    }

    .confirm-list li {
      margin-bottom: 0.25rem;
    }

    .whitespace-pre-wrap {
      white-space: pre-wrap;
    }

    .step-footer {
      padding: 1rem 1.25rem;
      border-top: 1px solid var(--border-light);
      background-color: #f8fafc;
      display: flex;
      flex-direction: column;

      justify-content: center;
      align-items: center;
      gap: 0.625rem;
    }

    @media (min-width: 480px) {
      .step-footer {
        flex-direction: row;
      }
    }

    /* 完了表示用 */
    .success-card {
      padding: 2rem 1.5rem;
      text-align: center;
    }

    .success-icon-wrapper {
      width: 3.5rem;
      height: 3.5rem;
      background-color: var(--success-bg);
      color: var(--success);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
    }

    .success-icon {
      width: 1.75rem;
      height: 1.75rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    .success-title {
      font-size: 1.125rem;
      font-weight: bold;
      color: var(--text-dark);
      margin-bottom: 0.5rem;
    }

    .success-text {
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin-bottom: 1.25rem;
      line-height: 1.6;
    }

    .btn-success-close {
      background-color: #0f172a;
      color: #ffffff;
      padding: 0.625rem 2rem;
      width: 100%;
    }

    @media (min-width: 480px) {
      .btn-success-close {
        width: auto;
      }
    }
/*--------------------------
    注意事項
---------------------------*/
.attention-p {
    font-size: 12px!important;
    margin: 1em 0 0;
    padding: 0;
}
.follow-up {
    margin-bottom: 1.5em;
}