/* =================================== */
/* ポップアップ用のスタイル */
/* =================================== */

/* ポップアップの背景（黒い半透明のオーバーレイ） */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

/* ポップアップが表示される時のスタイル */
.popup-overlay.show {
    visibility: visible;
    opacity: 1;
}

/* ポップアップのウィンドウ本体 */
.popup-window {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #fff;
    transform: scale(0.95);
    transition: transform 0.3s;
}

/* ポップアップ表示時にウィンドウを拡大 */
.popup-overlay.show .popup-window {
    transform: scale(1);
}

/* 閉じるボタン */
.popup-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 36px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    z-index: 1001;
}
.popup-close-btn:hover {
    color: #333;
}

/* ================================================== */
/* ポップアップ内のフォームのスタイル */
/* ================================================== */

.popup-window .contact-container {
    max-width: 850px;
    margin: 0;
    background-color: #fff;
    padding: 40px 60px;
}

.popup-window .contact-header { text-align: center; margin-bottom: 30px; }
.popup-window .contact-header h1 { font-size: 26px; font-weight: 600; margin: 0; }
.popup-window .contact-header .subtitle { font-size: 14px; color: #888; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 5px; }
.popup-window .progress-indicator { display: flex; padding: 0; margin: 0 auto 30px auto; list-style: none; max-width: 100%; overflow: hidden; }
.popup-window .progress-indicator .step { flex: 1; background-color: #f0f0f0; color: #888; text-align: center; padding: 12px 5px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); margin-left: -15px; z-index: 1; }
.popup-window .progress-indicator .step:first-child { clip-path: none; margin-left: 0; }
.popup-window .progress-indicator .step.active { background-color: #fdf5a6; color: #333; font-weight: bold; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); z-index: 2; }
.popup-window .progress-indicator .step.active + .step { clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); }
.popup-window .step .step-number { font-size: 14px; font-weight: bold; }
.popup-window .step .step-title { font-size: 14px; }
.popup-window .form-intro { text-align: center; margin-bottom: 40px; font-size: 15px; }
.popup-window .form-group { display: flex; margin-bottom: 25px; align-items: flex-start; }
.popup-window .form-group label { width: 200px; padding-top: 8px; font-weight: bold; font-size: 15px; flex-shrink: 0; }
.popup-window .form-group .form-content { flex: 1; }
.popup-window .required { background-color: #fdf5a6; color: #333; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: normal; margin-left: 8px; vertical-align: text-top; }
.popup-window input[type="text"], .popup-window input[type="email"], .popup-window textarea, .popup-window select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; box-sizing: border-box; }
.popup-window input::placeholder, .popup-window textarea::placeholder { color: #bbb; }
.popup-window textarea { height: 120px; resize: vertical; }
.popup-window select { width: 200px; cursor: pointer; }
.popup-window .radio-group-container { display: flex; flex-wrap: wrap; align-items: center; padding-top: 8px; gap: 15px; }
.popup-window .radio-label, .popup-window .checkbox-label { font-weight: normal; cursor: pointer; font-size: 15px; display: inline-block; line-height: 1.5; }
.popup-window .radio-label input, .popup-window .checkbox-label input { margin-right: 6px; vertical-align: middle; }
.popup-window .file-note { font-size: 13px; color: #666; margin-top: 10px; line-height: 1.6; }
.popup-window .agreement-group { text-align: center; margin: 40px 0; }
.popup-window .agreement-wrapper { display: inline-block; text-align: left; }
.popup-window .agreement-wrapper .checkbox-label { display: block; margin-bottom: 15px; }
.popup-window .agreement-wrapper .checkbox-label:last-child { margin-bottom: 0; }
.popup-window .agreement-wrapper a { color: inherit; text-decoration: none; }
.popup-window .agreement-wrapper a:hover { text-decoration: underline; }
.popup-window .submit-button-container { text-align: center; margin-top: 30px; }
.popup-window .submit-btn { background-color: #f7931e; color: #fff; border: none; padding: 14px 60px; font-size: 18px; font-weight: bold; border-radius: 50px; cursor: pointer; transition: background-color 0.3s ease; }
.popup-window .submit-btn:hover { background-color: #e68a1c; }
.popup-window .form-footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid #eee; font-size: 12px; color: #666; line-height: 1.8; }
/* =================================== */
/* 確認画面用のスタイル（追記） */
/* =================================== */

.confirmation-view {
    padding: 20px 40px;
}

.confirmation-view h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 15px;
}

.confirmation-view p {
    text-align: center;
    margin-bottom: 30px;
}

.confirmation-view ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eee;
}

.confirmation-view li {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
}

.confirmation-view li strong {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
    display: block;
}

.confirmation-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.confirmation-buttons .submit-btn.secondary {
    background-color: #888;
}
.confirmation-buttons .submit-btn.secondary:hover {
    background-color: #777;
}
/* =================================== */
/* 確認画面のスタイル（見た目調整） */
/* =================================== */

.confirmation-view li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 10px;
}

.confirmation-view li strong {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    width: 30%; /* ラベルの幅を固定 */
    flex-shrink: 0;
}

.confirmation-view .conf-value {
    width: 68%; /* 回答の幅 */
    font-size: 15px;
    line-height: 1.6;
    word-break: break-all; /* 長いURLなどがはみ出ないように */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .popup-window .contact-container { padding: 20px; }
    .popup-window .form-group { flex-direction: column; align-items: stretch; }
    .popup-window .form-group label { width: auto; padding-top: 0; margin-bottom: 8px; }
    .popup-window .radio-group-container { padding-top: 0; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .popup-window .progress-indicator .step { padding: 10px 2px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); margin-left: -10px; }
    .popup-window .progress-indicator .step.active { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
    .popup-window .step .step-number, .popup-window .step .step-title { font-size: 10px; }
}