css_content = """/* ============================================================
   CS調査診断ツール スタイルシート
   メインカラー: #78B2E0 統一版
   ============================================================ */

.cs-assessment-wrapper { 
  font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; 
  background: #78B2E0; 
  color: #1e293b; 
  min-height: 100vh; 
  box-sizing: border-box; 
}
.cs-assessment-wrapper * { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

.cs-screen { 
  display: none; 
  min-height: 80vh; 
  flex-direction: column; 
}
.cs-screen.active { 
  display: flex; 
}

/* ===== イントロ ===== */
#cs-s-intro { 
  background: #78B2E0; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding: 2.5rem 1.5rem; 
}
.cs-intro-org { 
  color: rgba(255, 255, 255, 0.8); 
  font-size: .8rem; 
  letter-spacing: .12em; 
  text-transform: uppercase; 
  margin-bottom: 2rem; 
}
.cs-intro-title { 
  color: #fff; 
  font-size: 1.9rem; 
  font-weight: 800; 
  line-height: 1.35; 
  margin-bottom: .5rem; 
}
.cs-intro-sub { 
  color: rgba(255, 255, 255, 0.95); 
  font-size: 1rem; 
  margin-bottom: 2rem; 
}
.cs-intro-card { 
  background: rgba(255, 255, 255, 0.15); 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  border-radius: 1rem; 
  padding: 1.5rem 2rem; 
  max-width: 520px; 
  margin: 0 auto 1.75rem; 
  color: #fff; 
  font-size: .9rem; 
  line-height: 1.7; 
  text-align: left; 
}
.cs-intro-card li { 
  margin-left: 1.2rem; 
  margin-bottom: .3rem; 
}
.cs-intro-meta { 
  color: rgba(255, 255, 255, 0.85); 
  font-size: .82rem; 
  margin-bottom: 2.5rem; 
}
.cs-btn-start { 
  background: #fff; 
  color: #78B2E0; 
  border: none; 
  border-radius: 2rem; 
  padding: 1rem 2.8rem; 
  font-size: 1.05rem; 
  font-weight: 700; 
  cursor: pointer; 
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); 
  transition: transform .2s, box-shadow .2s; 
}
.cs-btn-start:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); 
}

/* ===== 質問画面 ===== */
#cs-s-questions { 
  background: #78B2E0; 
}
.cs-q-header { 
  background: rgba(0, 0, 0, 0.08); 
  padding: 1rem 1.5rem; 
  display: flex; 
  align-items: center; 
  gap: 1.25rem; 
}
.cs-q-header-org { 
  color: rgba(255, 255, 255, 0.85); 
  font-size: .75rem; 
  font-weight: 600; 
  letter-spacing: .06em; 
  white-space: nowrap; 
}
.cs-q-prog-wrap { 
  flex: 1; 
}
.cs-q-prog-label { 
  color: rgba(255, 255, 255, 0.85); 
  font-size: .72rem; 
  text-align: right; 
  margin-bottom: .3rem; 
}
.cs-q-prog-bar { 
  background: rgba(255, 255, 255, 0.3); 
  border-radius: 99px; 
  height: 5px; 
  overflow: hidden; 
}
.cs-q-prog-fill { 
  background: #fff; 
  height: 100%; 
  border-radius: 99px; 
  transition: width .35s ease; 
}
.cs-q-body { 
  max-width: 640px; 
  margin: 0 auto; 
  padding: 2rem 1.25rem; 
  width: 100%; 
}
.cs-q-meta { 
  display: flex; 
  align-items: center; 
  gap: .5rem; 
  margin-bottom: .6rem; 
}
.cs-q-meta-num { 
  font-size: .82rem; 
  color: #334155; 
  font-weight: 700; 
}
.cs-q-dim-tag { 
  background: #f1f5f9; 
  color: #334155; 
  padding: .18rem .65rem; 
  border-radius: 99px; 
  font-size: .72rem; 
  font-weight: 700; 
}
.cs-q-ma-tag { 
  background: #f1f5f9; 
  color: #334155; 
  padding: .18rem .55rem; 
  border-radius: 99px; 
  font-size: .68rem; 
  font-weight: 700; 
}
.cs-q-text { 
  font-size: 1.08rem; 
  font-weight: 700; 
  line-height: 1.6; 
  margin-bottom: .5rem; 
  color: #0f172a; 
  white-space: pre-line; 
}
.cs-q-hint { 
  font-size: .8rem; 
  color: #475569; 
  margin-bottom: 1.25rem; 
}.cs-opts { 
  display: flex; 
  flex-direction: column; 
  gap: .65rem; 
  margin-bottom: 1.5rem; 
}
.cs-opt { 
  display: flex; 
  align-items: flex-start; 
  gap: .75rem; 
  padding: 1rem 1.2rem; 
  background: #ffffff; 
  border: 2px solid #ffffff; 
  border-radius: .75rem; 
  cursor: pointer; 
  transition: border-color .15s, background .15s; 
  user-select: none; 
}
.cs-opt:hover { 
  border-color: #78B2E0; 
  background: #f0f7fc; 
}
.cs-opt.sel { 
  border-color: #78B2E0; 
  background: #ffffff; 
  box-shadow: 0 0 0 1px #78B2E0;
}
.cs-opt-dot { 
  width: 20px; 
  height: 20px; 
  border: 2px solid #cbd5e1; 
  border-radius: 50%; 
  flex-shrink: 0; 
  margin-top: 2px; 
  transition: all .15s; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.cs-opt.sel .cs-opt-dot { 
  border-color: #78B2E0; 
  background: #78B2E0; 
}
.cs-opt.sel .cs-opt-dot::after { 
  content: ''; 
  width: 8px; 
  height: 8px; 
  background: #fff; 
  border-radius: 50%; 
}
.cs-opt-box { 
  width: 20px; 
  height: 20px; 
  border: 2px solid #cbd5e1; 
  border-radius: 5px; 
  flex-shrink: 0; 
  margin-top: 2px; 
  transition: all .15s; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.cs-opt.sel .cs-opt-box { 
  border-color: #78B2E0; 
  background: #78B2E0; 
}
.cs-opt.sel .cs-opt-box::after { 
  content: ''; 
  width: 9px; 
  height: 5px; 
  border-left: 2px solid #fff; 
  border-bottom: 2px solid #fff; 
  transform: rotate(-45deg) translateY(-1px); 
}
.cs-opt-text { 
  font-size: .92rem; 
  line-height: 1.5; 
  color: #334155; 
}
.cs-q-footer { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding-top: 1rem; 
  border-top: 1px solid rgba(255, 255, 255, 0.25); 
}
.cs-btn-back { 
  background: rgba(255, 255, 255, 0.15); 
  border: 1px solid rgba(255, 255, 255, 0.4); 
  border-radius: .5rem; 
  padding: .65rem 1.25rem; 
  font-size: .88rem; 
  color: #ffffff; 
  cursor: pointer; 
  transition: all .15s; 
}
.cs-btn-back:hover { 
  background: rgba(255, 255, 255, 0.25); 
}
.cs-btn-back:disabled { 
  opacity: 0; 
  pointer-events: none; 
}
.cs-btn-next { 
  background: #ffffff; 
  color: #78B2E0; 
  border: none; 
  border-radius: .5rem; 
  padding: .75rem 2rem; 
  font-size: .95rem; 
  font-weight: 700; 
  cursor: pointer; 
  transition: all .15s; 
  opacity: .4; 
  pointer-events: none; 
}
.cs-btn-next.on { 
  opacity: 1; 
  pointer-events: auto; 
}
.cs-btn-next.on:hover { 
  background: #f0f7fc; 
}

/* ===== 計算中 ===== */
#cs-s-calc { 
  background: #78B2E0; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding: 4rem 1rem; 
}
.cs-spinner { 
  width: 56px; 
  height: 56px; 
  border: 4px solid rgba(255, 255, 255, 0.3); 
  border-top-color: #fff; 
  border-radius: 50%; 
  animation: cs-spin .75s linear infinite; 
  margin: 0 auto 1.5rem; 
}
@keyframes cs-spin { 
  to { transform: rotate(360deg); } 
}
.cs-calc-txt { 
  color: rgba(255, 255, 255, 0.95); 
  font-size: 1rem; 
}

/* ===== フォーム画面 ===== */
#cs-s-form { 
  background: #78B2E0; 
}

/* ===== 結果画面 ===== */
#cs-s-results { 
  background: #78B2E0; 
}
.cs-res-header { 
  background: rgba(0, 0, 0, 0.08); 
  color: #fff; 
  padding: 1.25rem 1.5rem; 
  text-align: center; 
}
.cs-res-header small { 
  opacity: .8; 
  font-size: .75rem; 
  display: block; 
  margin-bottom: .2rem; 
}
.cs-res-header h1 { 
  font-size: 1.1rem; 
  font-weight: 600; 
}
.cs-res-body { 
  max-width: 720px; 
  margin: 0 auto; 
  padding: 1.75rem 1.25rem 3rem; 
  width: 100%; 
}
.cs-card { 
  background: #fff; 
  border-radius: 1rem; 
  padding: 1.5rem; 
  margin-bottom: 1.25rem; 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 
}
.cs-card-title { 
  font-size: .72rem; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: .06em; 
  color: #94a3b8; 
  margin-bottom: 1rem; 
}

.cs-star-main { 
  text-align: center; 
}
.cs-star-label { 
  font-size: .82rem; 
  color: #64748b; 
  margin-bottom: .6rem; 
}
.cs-star-icons { 
  font-size: 2.4rem; 
  letter-spacing: .15rem; 
  margin-bottom: .5rem; 
}
.cs-star-icons .cs-star-on { 
  color: #78B2E0; 
}
.cs-star-icons .cs-star-off { 
  color: #e2e8f0; 
}
.cs-star-stage { 
  font-size: 1.15rem; 
  font-weight: 800; 
  color: #78B2E0; 
  margin-bottom: .25rem; 
}
.cs-star-note { 
  font-size: .75rem; 
  color: #94a3b8; 
}

.cs-overall-comment { 
  font-size: .92rem; 
  line-height: 1.8; 
  color: #334155; 
  margin-top: 1.1rem; 
  padding-top: 1.1rem; 
  border-top: 1px solid #e2e8f0; 
}

.cs-cat-block { 
  padding: 1rem 0; 
  border-bottom: 1px solid #e2e8f0; 
}
.cs-cat-block:last-child { 
  border-bottom: none; 
}
.cs-cat-top { 
  display: flex; 
  align-items: flex-start; 
  justify-content: space-between; 
  margin-bottom: .5rem; 
  gap: .5rem; 
}
.cs-cat-name { 
  font-size: .92rem; 
  font-weight: 700; 
  color: #0f172a; 
  display: flex; 
  align-items: center; 
  gap: .5rem; 
  flex-wrap: wrap; 
  flex: 1; 
  min-width: 0; 
}
.cs-cat-badge { 
  background: #e0f2fe; 
  color: #0369a1; 
  font-size: .66rem; 
  font-weight: 700; 
  padding: .15rem .55rem; 
  border-radius: 99px; 
  white-space: nowrap; 
}
.cs-cat-score { 
  font-size: .95rem; 
  font-weight: 800; 
  white-space: nowrap; /* 数値が絶対に折り返されないように設定 */
  flex-shrink: 0;      /* 数値エリアが潰れないように設定 */
  text-align: right; 
}
.cs-cat-bar-bg { 
  background: #e2e8f0; 
  border-radius: 99px; 
  height: 10px; 
  overflow: hidden; 
  margin-bottom: .65rem; 
}
.cs-cat-bar-fill { 
  height: 100%; 
  border-radius: 99px; 
  transition: width .8s ease; 
}
.cs-cat-comment { 
  font-size: .85rem; 
  line-height: 1.75; 
  color: #374151; 
}

.cs-cta-card { 
  background: rgba(255, 255, 255, 0.15); 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  border-radius: 1rem; 
  padding: 2rem; 
  text-align: center; 
  color: #fff; 
  margin-bottom: 1.25rem; 
}
.cs-cta-card h2 { 
  font-size: 1.1rem; 
  margin-bottom: .4rem; 
}
.cs-cta-card p { 
  font-size: .85rem; 
  opacity: .9; 
  margin-bottom: 1.5rem; 
}
.cs-cta-btns { 
  display: flex; 
  gap: .75rem; 
  justify-content: center; 
  flex-wrap: wrap; 
}
.cs-btn-cta1 { 
  background: #fff; 
  color: #78B2E0; 
  border: none; 
  border-radius: .5rem; 
  padding: .8rem 1.5rem; 
  font-size: .9rem; 
  font-weight: 700; 
  cursor: pointer; 
  transition: all .15s; 
}
.cs-btn-cta1:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
}

.cs-btn-restart { 
  background: rgba(255, 255, 255, 0.15); 
  border: 1px solid rgba(255, 255, 255, 0.4); 
  border-radius: .5rem; 
  padding: .6rem 1.25rem; 
  font-size: .83rem; 
  color: #ffffff; 
  cursor: pointer; 
  display: block; 
  margin: .75rem auto 0; 
  transition: all .15s; 
}
.cs-btn-restart:hover { 
  background: rgba(255, 255, 255, 0.25); 
}

.cs-footnote { 
  font-size: .72rem; 
  color: rgba(255, 255, 255, 0.8); 
  text-align: center; 
  line-height: 1.6; 
  padding-top: 1rem; 
  padding-bottom: 1rem; 
}

@media(max-width: 480px){ 
  .cs-intro-title { font-size: 1.5rem; } 
  .cs-star-icons { font-size: 1.9rem; } 
  .cs-cat-name { font-size: .85rem; } 
}
"""

with open("module.css", "w", encoding="utf-8") as f:
    f.write(css_content)

print("CSS generated successfully.")