/* ===================== */
/* 6回目 経過確認フォーム CSS */
/* ===================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');

.ff-container { max-width:720px; margin:0 auto; padding:24px 20px 120px; font-family:'Noto Sans JP',sans-serif; color:#2C3E3A; }
.ff-container * { box-sizing:border-box; }

/* Header */
.ff-header { text-align:center; padding:32px 20px; background:linear-gradient(135deg,#2B6E4F 0%,#1E5A3D 100%); border-radius:0 0 28px 28px; margin:-24px -20px 28px; position:relative; overflow:hidden; }
.ff-header::before { content:''; position:absolute; top:-40%; right:-20%; width:300px; height:300px; background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%); border-radius:50%; }
.ff-header-badge { display:inline-block; background:rgba(255,255,255,0.18); color:#fff; font-family:'M PLUS Rounded 1c',sans-serif; font-size:13px; font-weight:500; padding:6px 18px; border-radius:20px; margin-bottom:14px; }
.ff-header h1 { font-family:'M PLUS Rounded 1c',sans-serif; color:#fff; font-size:26px; font-weight:700; letter-spacing:1px; margin:0; }
.ff-header p { color:rgba(255,255,255,0.8); font-size:14px; margin-top:8px; }

/* Progress */
.ff-progress { background:#fff; border-radius:20px; padding:16px 20px; margin-bottom:24px; box-shadow:0 1px 3px rgba(43,110,79,0.08); }
.ff-progress-label { font-size:12px; color:#6B7F7A; margin-bottom:8px; display:flex; justify-content:space-between; }
.ff-progress-track { height:6px; background:#E8EDEA; border-radius:3px; overflow:hidden; }
.ff-progress-fill { height:100%; background:linear-gradient(90deg,#2B6E4F,#3D9970); border-radius:3px; width:0%; transition:width 0.5s ease; }

/* Section */
.ff-section { background:#fff; border-radius:14px; padding:24px; margin-bottom:16px; box-shadow:0 1px 3px rgba(43,110,79,0.08); display:none; }
.ff-section.active { display:block; animation:ffSlideUp 0.4s ease; }
@keyframes ffSlideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.ff-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:#E8F5EE; color:#2B6E4F; font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:14px; border-radius:50%; margin-right:10px; }
.ff-section-title { font-family:'M PLUS Rounded 1c',sans-serif; font-size:17px; font-weight:600; color:#2C3E3A; margin-bottom:20px; display:flex; align-items:center; }
.ff-req { color:#D94040; font-size:12px; margin-left:4px; }
.ff-desc { font-size:13px; color:#6B7F7A; margin-bottom:16px; line-height:1.6; }
.ff-sub-question { margin-top:20px; }

/* Inputs */
.ff-input-row { display:flex; gap:12px; margin-bottom:16px; }
.ff-input-group { flex:1; }
.ff-input-group label { display:block; font-size:13px; font-weight:500; color:#6B7F7A; margin-bottom:6px; }
.ff-input-group input[type="text"] { width:100%; padding:14px 16px; border:2px solid #D4DDD8; border-radius:10px; font-family:'Noto Sans JP',sans-serif; font-size:16px; color:#2C3E3A; background:#F7FAF8; transition:border-color 0.2s,box-shadow 0.2s; outline:none; }
.ff-input-group input[type="text"]:focus { border-color:#2B6E4F; box-shadow:0 0 0 3px rgba(43,110,79,0.12); background:#fff; }

/* Radio/Checkbox Options */
.ff-options { display:flex; flex-direction:column; gap:10px; }
.ff-options.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ff-option { position:relative; cursor:pointer; -webkit-user-select:none; user-select:none; }
.ff-option input { position:absolute; opacity:0; pointer-events:none; }
.ff-option-label, .ff-check-label { display:flex; align-items:center; padding:16px; background:#F7FAF8; border:2px solid #D4DDD8; border-radius:10px; font-size:15px; color:#2C3E3A; transition:all 0.2s ease; min-height:54px; }
.ff-radio, .ff-check { width:22px; height:22px; border:2px solid #D4DDD8; margin-right:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.ff-radio { border-radius:50%; }
.ff-check { border-radius:6px; }
.ff-option input:checked + .ff-option-label, .ff-option input:checked + .ff-check-label { border-color:#2B6E4F; background:#E8F5EE; color:#2B6E4F; font-weight:500; }
.ff-option input:checked + .ff-option-label .ff-radio { border-color:#2B6E4F; background:#2B6E4F; }
.ff-option input:checked + .ff-option-label .ff-radio::after { content:''; width:8px; height:8px; background:#fff; border-radius:50%; }
.ff-option input:checked + .ff-check-label .ff-check { border-color:#2B6E4F; background:#2B6E4F; }
.ff-option input:checked + .ff-check-label .ff-check::after { content:'✓'; color:#fff; font-size:14px; font-weight:700; }
.ff-option-label:active, .ff-check-label:active { transform:scale(0.98); }

/* Slider */
.ff-slider-wrap { padding:10px 0; }
.ff-slider-value { text-align:center; margin-bottom:16px; }
.ff-slider-num { font-family:'M PLUS Rounded 1c',sans-serif; font-size:56px; font-weight:700; color:#2B6E4F; line-height:1; transition:color 0.3s; }
.ff-slider-unit { font-size:18px; color:#6B7F7A; margin-left:4px; }
.ff-slider-desc { font-size:13px; color:#6B7F7A; margin-top:4px; }
.ff-section input[type="range"] { -webkit-appearance:none; width:100%; height:8px; border-radius:4px; background:linear-gradient(to right,#2B6E4F 0%,#2B6E4F var(--val,50%),#E0E8E4 var(--val,50%),#E0E8E4 100%); outline:none; }
.ff-section input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:36px; height:36px; border-radius:50%; background:#fff; border:3px solid #2B6E4F; box-shadow:0 4px 16px rgba(43,110,79,0.1); cursor:pointer; }
.ff-slider-labels { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:#6B7F7A; }

/* Buttons */
.ff-btn-row { display:flex; gap:12px; margin-top:24px; }
.ff-btn { flex:1; padding:16px; border:none; border-radius:10px; font-family:'M PLUS Rounded 1c',sans-serif; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.ff-btn:active { transform:scale(0.97); }
.ff-btn-next { background:#2B6E4F; color:#fff; box-shadow:0 4px 12px rgba(43,110,79,0.25); }
.ff-btn-next:hover { background:#3D9970; }
.ff-btn-back { background:#F7FAF8; color:#6B7F7A; border:2px solid #D4DDD8; flex:0 0 auto; padding:16px 24px; }
.ff-btn-submit { background:#E8913A; color:#fff; box-shadow:0 4px 12px rgba(232,145,58,0.3); font-size:17px; padding:18px; }
.ff-btn-reset { margin-top:24px; background:#F7FAF8; color:#6B7F7A; border:2px solid #D4DDD8; width:100%; }
.ff-error { font-size:13px; color:#D94040; margin-top:8px; display:none; }
.ff-section.error .ff-error { display:block; }

/* Spinner */
.ff-spinner { width:40px; height:40px; border:4px solid #E8EDEA; border-top-color:#2B6E4F; border-radius:50%; animation:ffSpin 0.8s linear infinite; margin:0 auto; }
@keyframes ffSpin { to{transform:rotate(360deg)} }

/* Results */
.ff-result { display:none; animation:ffSlideUp 0.5s ease; }
.ff-result.active { display:block; }
.ff-result-card { background:#fff; border-radius:14px; padding:32px 24px; box-shadow:0 8px 32px rgba(43,110,79,0.12); text-align:center; margin-bottom:16px; }
.ff-result-icon { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:36px; }
.ff-result-title { font-family:'M PLUS Rounded 1c',sans-serif; font-size:22px; font-weight:700; margin-bottom:12px; }
.ff-result-msg { font-size:15px; color:#6B7F7A; line-height:1.8; margin-bottom:24px; }

/* Journey */
.ff-journey { background:#fff; border-radius:14px; padding:24px; box-shadow:0 1px 3px rgba(43,110,79,0.08); margin-bottom:16px; }
.ff-journey h3 { font-family:'M PLUS Rounded 1c',sans-serif; font-size:16px; font-weight:600; text-align:center; margin-bottom:20px; }
.ff-journey-steps { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ff-step { text-align:center; padding:12px 16px; border-radius:10px; min-width:100px; }
.ff-step.minus { background:#FEE2E2; color:#991B1B; }
.ff-step.zero { background:#FFF3E6; color:#92400E; }
.ff-step.plus { background:#E8F5EE; color:#065F46; }
.ff-step.current { border:3px solid #E8913A; }
.ff-step.current-pain { border:3px solid #991B1B; }
.ff-step-label { font-size:11px; font-weight:500; margin-bottom:4px; }
.ff-step-value { font-family:'M PLUS Rounded 1c',sans-serif; font-size:18px; font-weight:700; }
.ff-step-desc { font-size:11px; margin-top:4px; }
.ff-badge { font-size:10px; background:#E8913A; color:#fff; padding:2px 6px; border-radius:8px; }
.ff-badge-red { font-size:10px; background:#DC2626; color:#fff; padding:2px 6px; border-radius:8px; }
.ff-arrow { font-size:20px; color:#6B7F7A; }
.ff-journey-note { font-size:13px; color:#6B7F7A; text-align:center; line-height:1.7; }

/* Proposals */
.ff-proposals-title { font-family:'M PLUS Rounded 1c',sans-serif; font-size:16px; font-weight:600; margin-bottom:16px; text-align:center; }
.ff-proposal-card { background:#F7FAF8; border-radius:10px; padding:20px; margin-bottom:12px; border-left:4px solid #2B6E4F; }
.ff-proposal-card.pink { border-left-color:#C45B8A; }
.ff-proposal-card.blue { border-left-color:#4A90A4; }
.ff-proposal-card.accent { border-left-color:#E8913A; }
.ff-proposal-card.with-img { padding:0; overflow:hidden; }
.ff-proposal-img { width:100%; overflow:hidden; border-radius:10px 10px 0 0; }
.ff-proposal-img img { width:100%; height:160px; object-fit:cover; display:block; }
.ff-proposal-inner { padding:16px 20px 20px; }
.ff-proposal-title { font-family:'M PLUS Rounded 1c',sans-serif; font-size:15px; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.ff-proposal-title.green { color:#2B6E4F; }
.ff-proposal-title.pink { color:#C45B8A; }
.ff-proposal-title.blue { color:#4A90A4; }
.ff-proposal-title.accent { color:#E8913A; }
.ff-proposal-card p { font-size:14px; color:#6B7F7A; line-height:1.7; margin:0; }

/* Summary */
.ff-summary { background:#fff; border-radius:14px; padding:24px; box-shadow:0 1px 3px rgba(43,110,79,0.08); margin-bottom:16px; }
.ff-summary h3 { font-family:'M PLUS Rounded 1c',sans-serif; font-size:15px; font-weight:600; margin-bottom:16px; }
.ff-summary-item { display:flex; padding:10px 0; border-bottom:1px solid #F0F4F2; font-size:14px; }
.ff-summary-item:last-child { border-bottom:none; }
.ff-summary-label { color:#6B7F7A; width:140px; flex-shrink:0; }
.ff-summary-value { color:#2C3E3A; font-weight:500; }

/* Mobile */
@media (max-width:500px) {
  .ff-options.two-col { grid-template-columns:1fr; }
  .ff-journey-steps { flex-direction:column; }
  .ff-arrow { transform:rotate(90deg); }
}
