/* members ページ固有スタイル */

/* ========== ページヒーロー ========== */
    .page-hero {      background: #1e3a5f;
      padding: 1.7rem 0 1.3rem;
      color: #fff;
    }
    .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700;
      margin: 0 0 0.05rem;
    }
    .page-hero-sub {
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      opacity: 0.75;
      font-weight: 300;
    }

    /* ========== 共通セクションヘッダー ========== */
    .members-section-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .members-section-eyebrow {
      font-size: 0.68rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: #8B6000;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-bottom: 0.7rem;
    }
    .members-section-eyebrow::before,
    .members-section-eyebrow::after {
      content: '';
      display: block;
      width: 2rem;
      height: 1px;
      background: currentColor;
      opacity: 0.4;
    }
    .members-section-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
      font-weight: 700;
      color: var(--color-text);
      margin: 0;
    }

    /* ========== Recruitment セクション ========== */
    #members-main {
      background: var(--color-warm-white);
      padding: 5rem 0 4rem;
      text-align: center;
    }
    .members-main-inner {
      max-width: 680px;
      margin: 0 auto;
    }
    .members-recruit-eyebrow {
      font-size: 0.68rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: #8B6000;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .members-recruit-eyebrow::before,
    .members-recruit-eyebrow::after {
      content: '';
      display: block;
      width: 2rem;
      height: 1px;
      background: currentColor;
      opacity: 0.4;
    }
    .members-recruit-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
      font-weight: 700;
      color: var(--color-text);
      margin: 0 0 2rem;
      line-height: 1.2;
    }
    .members-recruit-lead {
      font-size: 0.95rem;
      color: var(--color-text-sub);
      margin: 0 0 2.5rem;
      letter-spacing: 0.04em;
    }
    /* 写真エリア全体 */
    .members-photo-layout {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin: 0 0 2rem;
      text-align: left;
    }

    /* 左：メイン写真 */
    .members-img-wrap {
      position: relative;
      flex: 0 0 56%;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(30,30,60,0.16);
    }
    .members-img-wrap img {
      width: 100%;
      display: block;
      aspect-ratio: 4/3;
      object-fit: cover;
    }
    .members-img-credit {
      position: absolute;
      bottom: 0.4rem;
      right: 0.6rem;
      font-size: 0.65rem;
      color: rgba(255,255,255,0.85);
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      pointer-events: none;
    }

    /* 右：丸型写真 2枚ななめ配置 */
    .members-circles {
      flex: 1;
      position: relative;
      aspect-ratio: 1 / 1.15;
    }
    .members-circle {
      position: absolute;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 6px 24px rgba(30,30,60,0.18);
      border: 3px solid #fff;
    }
    .members-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .members-circle--top {
      width: 72%;
      aspect-ratio: 1;
      top: 0;
      right: 0;
    }
    .members-circle--bottom {
      width: 72%;
      aspect-ratio: 1;
      bottom: 0;
      left: 0;
    }

    .members-recruit-copy {
      font-size: 0.92rem;
      line-height: 2.1;
      color: var(--color-text-sub);
      margin: 0 0 2rem;
      text-align: center;
    }
    /* 練習情報カード */
    .members-recruit-info-card {
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
      margin: 0 auto 0.8rem;
      max-width: 640px;
      text-align: left;
    }
    .members-recruit-info-row {
      display: flex;
      align-items: baseline;
      gap: 1.5rem;
      padding: 1rem 1.6rem;
      border-bottom: 1px solid var(--color-border);
    }
    .members-recruit-info-row:last-child {
      border-bottom: none;
    }
    .members-recruit-info-row dt {
      flex: 0 0 5.5em;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: 0.06em;
    }
    .members-recruit-info-row dd {
      margin: 0;
      font-size: 0.93rem;
      color: var(--color-text);
      line-height: 1.6;
    }
    .members-recruit-note {
      font-size: 0.78rem;
      color: var(--color-text-sub);
      text-align: center;
      margin: 0 0 2.5rem;
      line-height: 1.8;
    }

    /* ボタン群（join-cta と同レイアウト） */
    .members-recruit-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
    }
    /* 白背景上での btn-outline-white を上書き */
    .members-recruit-btns .btn-outline-white {
      color: var(--color-primary);
      border-color: var(--color-primary);
    }
    .members-recruit-btns .btn-outline-white:hover {
      background: var(--color-primary);
      color: #fff;
    }

    /* ========== Contact フォームセクション ========== */
    #members-form {
      background: var(--color-warm-white);
      padding: 5rem 0;
    }
    .members-form-inner {
      max-width: 640px;
      margin: 0 auto;
    }
    .members-form-lead {
      text-align: center;
      font-size: 0.92rem;
      color: var(--color-text-sub);
      line-height: 1.9;
      margin-bottom: 2.5rem;
    }

    /* フォームカード */
    .contact-form {
      background: #fff;
      border-radius: 8px;
      padding: 2.5rem;
      box-shadow: 0 4px 24px rgba(30,30,60,0.08);
    }
    .form-group {
      margin-bottom: 1.6rem;
    }
    .form-label {
      display: block;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 0.5rem;
      letter-spacing: 0.04em;
    }
    .form-label .required {
      display: inline-block;
      font-size: 0.68rem;
      background: var(--color-cta);
      color: #fff;
      padding: 0.1rem 0.45rem;
      border-radius: 2px;
      margin-left: 0.4rem;
      vertical-align: middle;
      letter-spacing: 0;
    }
    .form-label .optional {
      display: inline-block;
      font-size: 0.68rem;
      background: #aaa;
      color: #fff;
      padding: 0.1rem 0.45rem;
      border-radius: 2px;
      margin-left: 0.4rem;
      vertical-align: middle;
      letter-spacing: 0;
    }
    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1.5px solid var(--color-border);
      border-radius: 4px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--color-text);
      background: var(--color-warm-white);
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
      appearance: none;
    }
    .form-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555577' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
      cursor: pointer;
    }
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(46,109,164,0.15);
      background: #fff;
    }
    .form-textarea {
      height: 150px;
      resize: vertical;
      line-height: 1.8;
    }

    /* 見学希望日グループ fieldset */
    .visit-dates-group {
      border: 1.5px solid var(--color-border);
      border-radius: 6px;
      padding: 1.4rem 1.6rem;
      margin-bottom: 1.6rem;
      background: var(--color-bg-section);
    }
    .visit-dates-legend {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: 0.04em;
      padding: 0 0.3rem;
    }
    .visit-dates-note {
      font-size: 0.78rem;
      color: var(--color-text-sub);
      margin-top: 0.4rem;
    }
    .visit-dates-rows {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }
    .visit-date-row {
      display: grid;
      grid-template-columns: 5em 1fr;
      align-items: center;
      gap: 0.8rem;
    }
    .visit-date-label {
      font-size: 0.8rem;
      color: var(--color-text-sub);
      font-weight: 600;
    }
    .visit-date-input {
      width: 100%;
    }

    /* 見学希望日フィールド（条件表示） */
    .form-visit-dates {
      display: none;
      background: var(--color-bg-section);
      border-radius: 6px;
      padding: 1.4rem 1.6rem;
      margin-bottom: 1.6rem;
      border: 1.5px solid var(--color-border);
    }
    .form-visit-dates.is-visible {
      display: block;
    }
    .form-visit-dates-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 1rem;
      letter-spacing: 0.04em;
    }
    .form-date-group {
      display: grid;
      grid-template-columns: 5em 1fr;
      align-items: center;
      gap: 0.8rem;
      margin-bottom: 0.8rem;
    }
    .form-date-group:last-child {
      margin-bottom: 0;
    }
    .form-date-label {
      font-size: 0.8rem;
      color: var(--color-text-sub);
      font-weight: 600;
    }
    .form-input-date {
      padding: 0.65rem 0.9rem;
      border: 1.5px solid var(--color-border);
      border-radius: 4px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--color-text);
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
      width: 100%;
      cursor: pointer;
    }
    .form-input-date:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(46,109,164,0.15);
    }

    .form-submit {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: var(--color-cta);
      color: #fff;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
      padding: 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: background 0.2s;
      margin-top: 0.5rem;
    }
    .form-submit:hover { background: var(--color-cta-dk); }
    .form-submit:focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 2px;
    }
    .form-reply-note {
      font-size: 0.82rem;
      color: var(--color-text);
      text-align: center;
      margin-top: 1.4rem;
      line-height: 1.9;
      background: var(--color-bg-section);
      border-radius: 4px;
      padding: 0.8rem 1rem;
    }
    .form-privacy-note {
      font-size: 0.76rem;
      color: var(--color-text-sub);
      text-align: center;
      margin-top: 0.8rem;
      line-height: 1.8;
    }
    .form-privacy-note a { color: var(--color-primary); }

    /* ========== CF7送信フィードバック（WordPress連携） ========== */
    .form-feedback {
      margin-top: 1rem;
      padding: 0.9rem 1.1rem;
      border-radius: 4px;
      font-size: 0.88rem;
      line-height: 1.8;
      white-space: pre-line;
      display: none;
    }
    .form-feedback:empty { display: none; }
    .form-feedback--success {
      display: block;
      background: rgba(46,109,164,0.1);
      color: var(--color-primary-dk);
      border: 1px solid var(--color-primary);
    }
    .form-feedback--error {
      display: block;
      background: rgba(232,69,69,0.08);
      color: var(--color-cta-dk);
      border: 1px solid var(--color-cta);
    }
    .form-field-error {
      color: var(--color-cta-dk);
      font-size: 0.78rem;
      margin: 0.35rem 0 0;
      line-height: 1.6;
    }
    [aria-invalid="true"] {
      border-color: var(--color-cta) !important;
    }
    .form-submit[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .contact-form-noscript {
      font-size: 0.8rem;
      color: var(--color-cta-dk);
      background: rgba(232,69,69,0.08);
      border: 1px solid var(--color-cta);
      border-radius: 4px;
      padding: 0.8rem 1rem;
      margin-bottom: 1rem;
    }

    /* ========== 送信内容確認モーダル（WordPress連携: 見学申込フォーム） ========== */
    body.confirm-modal-open {
      overflow: hidden;
    }
    .confirm-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(20, 24, 40, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      z-index: 1000;
    }
    .confirm-modal {
      background: #fff;
      border-radius: 8px;
      max-width: 520px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding: 2rem 2rem 1.8rem;
      box-shadow: 0 12px 40px rgba(30,30,60,0.28);
    }
    .confirm-modal-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--color-text);
      margin: 0 0 1.4rem;
      text-align: center;
    }
    .confirm-modal-body {
      margin: 0 0 1.8rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .confirm-modal-row {
      border-bottom: 1px solid var(--color-border);
      padding-bottom: 0.9rem;
    }
    .confirm-modal-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--color-text-sub);
      letter-spacing: 0.04em;
      margin: 0 0 0.35rem;
    }
    .confirm-modal-value {
      font-size: 0.95rem;
      color: var(--color-text);
      line-height: 1.8;
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .confirm-modal-actions {
      display: flex;
      gap: 0.8rem;
    }
    .confirm-modal-actions button {
      flex: 1;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 700;
      padding: 0.85rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: background 0.2s, border-color 0.2s;
    }
    .confirm-modal-cancel {
      background: #fff;
      color: var(--color-text-sub);
      border: 1.5px solid var(--color-border);
    }
    .confirm-modal-cancel:hover {
      border-color: var(--color-text-sub);
    }
    .confirm-modal-submit {
      background: var(--color-cta);
      color: #fff;
      border: none;
    }
    .confirm-modal-submit:hover {
      background: var(--color-cta-dk);
    }
    .confirm-modal-actions button:focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 2px;
    }
    @media (max-width: 480px) {
      .confirm-modal { padding: 1.6rem 1.4rem 1.4rem; }
      .confirm-modal-actions { flex-direction: column-reverse; }
    }

    /* CF7 実装メモ（非表示） */
    /* WordPressでのCF7実装時:
       [select* inquiry-type "見学希望" "お問い合わせ"]
       [text* your-name] [email* your-email]
       [date visit-date-1] [date visit-date-2] [date visit-date-3]
       [textarea* your-message]
       条件分岐: Conditional Fields for Contact Form 7 プラグインを使用
       [cf7cf_field_group field="inquiry-type" value="見学希望"]
         見学希望日 [date visit-date-1] 他
       [/cf7cf_field_group]
    */

    /* ========== レスポンシブ ========== */
    @media (max-width: 767px) {
      #members-main { padding: 3.5rem 0 3rem; }
      #members-form  { padding: 3.5rem 0; }
      .contact-form  { padding: 1.8rem 1.4rem; }
      .form-date-group { grid-template-columns: 4.5em 1fr; gap: 0.6rem; }
      .form-visit-dates { padding: 1.2rem 1.2rem; }
      .members-recruit-btns { flex-direction: column; align-items: center; }
      .members-photo-layout { flex-direction: column; gap: 1.2rem; }
      .members-img-wrap { flex: none; width: 100%; }
      .members-circles { width: 80%; aspect-ratio: 1 / 1.15; margin: 0 auto; }
      /* 本文フォントサイズをお知らせ詳細に統一（0.95rem） */
      .members-recruit-copy,
      .members-recruit-note,
      .members-section-desc,
      .members-recruit-info-row dd,
      .members-form-lead,
      .form-reply-note,
      .form-privacy-note { font-size: 0.95rem; line-height: 1.95; }
    }

    /* ===== スマートフォン横向き：本文フォントサイズ統一 ===== */
    @media (max-width: 1024px) and (orientation: landscape) {
      .members-recruit-copy,
      .members-recruit-note,
      .members-section-desc,
      .members-recruit-info-row dd,
      .members-form-lead,
      .form-reply-note,
      .form-privacy-note { font-size: 0.95rem; line-height: 1.95; }
    }