/* ====================================================================
   体験申込フォームの共通CSS（2026-09-03 抽出 / M4）

   trial_top / trial_form / trial_second / trial_cancel の4枚は、
   互いのコピーとして育っていた。実測:
     4枚に現れるセレクタ            201種
       2枚以上に同じ中身で重複        90種
       2枚以上にあるが中身が食い違う  15種  ← 各画面に残す
   90種のうち9種は、**そのセレクタを持たない画面がそのクラスを使っている**。
   寄せるとその画面の見た目が変わるので外した。残る81種をここへ移した。

   外した例:
     .submit-btn:disabled:hover  … trial_cancel と trial_second が同じ内容で持つが、
                                   trial_form は .submit-btn を使うのに持っていない
     .form-group textarea        … 同上（trial_form が textarea を使う）
     .target-card.*:hover        … trial_top が .target-card を使うのに持っていない

   各画面に残してある食い違い（15種）:
     body / :root … 画面ごとの色と変数。ここが違うので、この共有CSSの中の
                    var(--…) も画面ごとに解決される。従来と同じ振る舞い
     .target-card / .section-title / .form-group label / .slot-remaining ほか

   読み込み位置: 各画面の <head>、その画面の <style> より **前**。
   後ろにすると上の15種の上書きが効かなくなる。検査11が見張る。
   ==================================================================== */

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

/* Flash messages */
.flash-message {
            padding: 12px 16px;
            border-radius: 12px;
            margin-bottom: 20px;
            font-weight: 500;
        }

.flash-message.error {
            background: #fee2e2;
            color: var(--color-pink);
            border: 1px solid var(--color-pink);
        }

/* Section heading */
.section-heading {
            text-align: center;
            margin-bottom: 40px;
        }

.section-heading .en-label {
            font-family: var(--font-en);
            font-size: 13px;
            font-weight: 600;
            color: var(--color-navy);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 8px;
            display: block;
        }

.section-heading h2 {
            font-family: var(--font-jp);
            font-size: 28px;
            font-weight: 700;
            color: var(--color-navy);
            display: inline-block;
            position: relative;
            padding-bottom: 12px;
        }

.section-heading h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-pink), var(--color-mint));
            border-radius: 4px;
            opacity: 0.7;
        }

.section-heading .description {
            font-size: 15px;
            color: var(--color-text-light);
            line-height: 2;
            margin-top: 24px;
        }

/* Step section */
.step-section {
            margin-bottom: 48px;
        }

.step-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

.step-number {
            font-family: var(--font-en);
            font-size: 14px;
            font-weight: 700;
            color: var(--color-white);
            background: var(--color-navy);
            padding: 6px 14px;
            border-radius: 20px;
        }

.step-text {
            font-size: 18px;
            font-weight: 700;
            color: var(--color-navy);
        }

/* Target cards */
.target-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

.target-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        }

.target-card.elementary .target-icon {
            background: linear-gradient(135deg, var(--color-green), var(--color-mint));
        }

.target-card.elementary .check-icon {
            background: var(--color-green);
        }

.target-card.junior_high .target-icon {
            background: linear-gradient(135deg, var(--color-navy), #3b5998);
        }

.target-card.junior_high .check-icon {
            background: var(--color-navy);
        }

.target-card .check-icon {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }

.target-card.selected .check-icon {
            opacity: 1;
            transform: scale(1);
        }

.target-card .target-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 28px;
            color: white;
        }

.target-card .target-name {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-navy);
        }

.target-card .target-desc {
            font-size: 13px;
            color: var(--color-text-light);
            margin-top: 8px;
        }

/* Venue radio list */
.venue-radio-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

.venue-radio-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            background: #f8f9fa;
            border: 2px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

.venue-radio-item:hover {
            background: #f0f3fc;
            border-color: var(--color-navy);
        }

.venue-radio-item.selected {
            background: linear-gradient(135deg, #e8ecf8 0%, #f0f3fc 100%);
            border-color: var(--color-navy);
        }

.venue-radio-item input[type="radio"] {
            width: 20px;
            height: 20px;
            accent-color: var(--color-navy);
            margin-right: 12px;
            cursor: pointer;
        }

.venue-radio-label {
            font-weight: 600;
            color: var(--color-navy);
        }

.venue-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 12px;
        }

.venue-status {
            display: inline-block;
            font-family: var(--font-en);
            font-size: 10px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 10px;
        }

.venue-status.active {
            background: linear-gradient(90deg, var(--color-green), var(--color-mint));
            color: var(--color-navy);
        }

.venue-status.inactive {
            background: #f0f0f0;
            color: #888;
        }

.venue-info-compact {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

.venue-info-item {
            font-size: 13px;
            color: var(--color-text);
            display: flex;
            align-items: center;
            gap: 8px;
        }

.venue-info-item .label {
            color: var(--color-text-light);
            font-size: 11px;
            min-width: 48px;
        }

.venue-info-item .value {
            font-weight: 500;
        }

/* Calendar */
.calendar-container {
            margin-bottom: 20px;
        }

.calendar-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 16px;
        }

.calendar-nav {
            width: 36px;
            height: 36px;
            border: 2px solid var(--color-navy);
            background: var(--color-white);
            border-radius: 50%;
            cursor: pointer;
            font-size: 14px;
            color: var(--color-navy);
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.calendar-nav:hover {
            background: var(--color-navy);
            color: var(--color-white);
        }

.calendar-nav:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

.calendar-month {
            font-size: 18px;
            font-weight: 700;
            color: var(--color-navy);
            min-width: 140px;
            text-align: center;
        }

.calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }

.calendar-weekday {
            text-align: center;
            font-size: 12px;
            font-weight: 700;
            color: var(--color-navy);
            padding: 8px 0;
        }

.calendar-weekday.sat {
            color: #2196f3;
        }

.calendar-weekday.sun {
            color: var(--color-pink);
        }

.calendar-cell {
            min-height: 80px;
            background: var(--color-white);
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 4px;
            display: flex;
            flex-direction: column;
        }

.calendar-cell.other-month {
            background: #f5f5f5;
        }

.calendar-cell.other-month .cell-date {
            color: #ccc;
        }

.calendar-cell.past {
            background: #f9f9f9;
        }

.calendar-cell.past .cell-date {
            color: #bbb;
        }

.calendar-cell.today {
            border-color: var(--color-navy);
            border-width: 2px;
        }

.cell-date {
            font-size: 12px;
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 4px;
            text-align: center;
        }

.calendar-cell.sat .cell-date {
            color: #2196f3;
        }

.calendar-cell.sun .cell-date {
            color: var(--color-pink);
        }

.cell-slots {
            display: flex;
            flex-direction: column;
            gap: 3px;
            flex: 1;
        }

.slot-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 6px 4px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: linear-gradient(135deg, rgba(0, 244, 142, 0.15), rgba(0, 224, 226, 0.15));
            min-height: 44px;
        }

.slot-btn:hover {
            background: linear-gradient(135deg, rgba(0, 244, 142, 0.3), rgba(0, 224, 226, 0.3));
            transform: scale(1.02);
        }

.slot-btn.selected {
            background: var(--color-navy);
            color: var(--color-white);
            box-shadow: 0 2px 8px rgba(14, 38, 137, 0.3);
        }

.slot-btn.selected .slot-time,
        .slot-btn.selected .slot-remaining {
            color: var(--color-white);
        }

.slot-btn.full {
            background: #f0f0f0;
            cursor: not-allowed;
            opacity: 0.6;
        }

.slot-btn.full .slot-time {
            text-decoration: line-through;
            color: #999;
        }

.slot-btn.full .slot-remaining {
            color: #999;
        }

.slot-time {
            font-size: 11px;
            font-weight: 700;
            color: var(--color-navy);
            font-family: var(--font-en);
        }

.selected-slot-display {
            margin-top: 16px;
            padding: 14px;
            background: rgba(14, 38, 137, 0.05);
            border: 2px solid var(--color-navy);
            border-radius: 12px;
            text-align: center;
            display: none;
        }

.selected-slot-display.show {
            display: block;
        }

.selected-slot-label {
            font-size: 12px;
            color: var(--color-text-light);
            margin-bottom: 4px;
        }

.selected-slot-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--color-navy);
        }

/* Form card */
.form-card {
            background: var(--color-white);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(14, 38, 137, 0.08);
        }

.form-group {
            margin-bottom: 20px;
        }

/* Sibling section */
.sibling-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px dashed #e0e0e0;
        }

.sibling-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            margin-bottom: 16px;
            font-weight: 600;
            color: var(--color-navy);
        }

.sibling-toggle input {
            width: auto;
            accent-color: var(--color-navy);
        }

.sibling-fields {
            display: none;
        }

.sibling-fields.show {
            display: block;
        }

.submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 244, 142, 0.3), transparent);
            transition: left 0.5s ease;
        }

.submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(14, 38, 137, 0.3);
        }

.submit-btn:hover::before {
            left: 100%;
        }

.submit-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

.loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--color-base);
            border-top-color: var(--color-mint);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 16px;
        }
