/* ========================================
   ピコっとラボとは ページ固有CSS
   v1
======================================== */
.page-hero { padding: 120px 2rem 60px; background: var(--bg-light); text-align: center; }
.page-hero-inner { max-width: 800px; margin: 0 auto; }
.page-hero .section-label { margin-bottom: 1rem; }
.page-hero h1 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; line-height: 1.4; letter-spacing: 0.03em; margin-bottom: 1.5rem; }
.page-hero h1 .highlight { color: var(--primary-blue); }
.page-hero-lead { font-size: 1.1rem; color: var(--text-gray); line-height: 2; font-weight: 500; }

.about-concept { padding: 100px 2rem; background: var(--bg-white); }
.about-concept-inner { max-width: 900px; margin: 0 auto; }

.concept-message { background: var(--bg-blue-light); border-radius: 24px; padding: 3rem; border: 3px solid var(--primary-blue); margin-bottom: 3rem; }
.concept-message p { font-size: 1.1rem; font-weight: 500; line-height: 2.2; color: #333; margin-bottom: 1.5rem; }
.concept-message p:last-child { margin-bottom: 0; }
.concept-message strong { color: var(--primary-blue); font-weight: 800; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3rem; }
.value-card { background: var(--white); border-radius: 24px; padding: 2.5rem 2rem; text-align: center; box-shadow: var(--shadow-card); border: 3px solid var(--primary-blue); transition: all 0.3s ease; position: relative; overflow: hidden; }
.value-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--primary-blue); border-radius: 24px 24px 0 0; }
.value-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); }
.value-number { font-family: var(--font-accent); font-size: 3rem; font-weight: 800; color: rgba(0,151,211,0.15); position: absolute; top: 1rem; right: 1.5rem; }
.value-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.value-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; margin-bottom: 0.75rem; color: var(--text-dark); }
.value-desc { color: var(--text-gray); font-weight: 500; line-height: 1.9; font-size: 0.95rem; }

.cycle-section { padding: 80px 2rem; background: var(--bg-light); }
.cycle-inner { max-width: 900px; margin: 0 auto; }
.cycle-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.5rem 0; }
.cycle-step { background: var(--white); border-radius: 16px; padding: 1.5rem 1rem; text-align: center; box-shadow: var(--shadow-soft); position: relative; }
.cycle-step .step-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; }
.cycle-step .step-label { font-weight: 800; font-size: 1rem; color: var(--primary-blue); }
.cycle-step .step-desc { font-size: 0.85rem; color: var(--text-gray); margin-top: 0.3rem; font-weight: 500; }
.cycle-arrow { position: absolute; right: -1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--primary-blue); font-weight: 900; z-index: 1; }
.cycle-step:last-child .cycle-arrow { display: none; }
.cycle-highlight { background: var(--white); border-radius: 16px; padding: 1.5rem 2rem; text-align: center; box-shadow: var(--shadow-soft); border-left: 5px solid var(--primary-blue); }
.cycle-highlight p { font-weight: 700; font-size: 1.1rem; color: var(--primary-blue-dark); line-height: 1.8; margin: 0; }

.org-section { padding: 80px 2rem; background: var(--bg-white); }
.org-inner { max-width: 700px; margin: 0 auto; }
.org-card { background: var(--bg-blue-light); border-radius: 24px; padding: 2.5rem; border: 3px solid var(--primary-blue); display: flex; align-items: center; gap: 2rem; }
.org-info h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; margin-bottom: 0.5rem; }
.org-info p { color: var(--text-gray); font-weight: 500; font-size: 0.95rem; line-height: 1.8; margin-bottom: 0.75rem; }
.org-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--primary-blue); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: gap 0.3s; }
.org-link:hover { gap: 0.7rem; }

@media (max-width: 768px) {
  .page-hero { padding: 100px 1.5rem 40px; }
  .page-hero h1 { font-size: 1.5rem; }
  .concept-message { padding: 2rem 1.5rem; }
  .concept-message p { font-size: 1rem; line-height: 2; }
  .values-grid { grid-template-columns: 1fr; }
  .cycle-steps { grid-template-columns: 1fr; gap: 0.75rem; }
  .cycle-step { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.25rem; }
  .cycle-step .step-icon { margin-bottom: 0; font-size: 1.5rem; }
  .cycle-arrow { right: auto; left: 50%; top: auto; bottom: -0.8rem; transform: translateX(-50%) rotate(90deg); font-size: 1.2rem; }
  .org-card { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}