/* =========================================================
   about.css
   第2階層「私たちが目指すもの」ページ（about.html）専用スタイル
   ========================================================= */

/* ===== Hero ===== */
.about-hero{
  position:relative; overflow:hidden; min-height:420px;
  display:flex; align-items:flex-start; justify-content:center; text-align:center;
  background:url('../images/about-hero-bg.jpg') center 65%/cover no-repeat;
  padding:64px 20px 40px;
}
.about-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,24,46,.55) 0%, rgba(8,24,46,.28) 60%, rgba(8,24,46,.08) 100%);
  z-index:0;
}
.about-hero-content{position:relative; z-index:1; max-width:720px;}
.about-hero h1{color:#fff; font-size:34px; font-weight:900; margin-bottom:16px; text-shadow:0 2px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.55);}
.about-hero .lead{color:#fff; font-size:20px; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);}

/* ===== Intro ===== */
.about-intro{padding:32px 0 8px; text-align:center;}
.about-intro p{max-width:70ch; margin:0 auto; font-size:14.5px; color:var(--gray-text); line-height:1.9;}

/* ===== Purpose ===== */
.about-purpose{padding:44px 0 8px;}
.about-purpose-text{max-width:70ch; margin:0 auto 30px; text-align:center;}
.about-purpose-text p{font-size:14.5px; color:var(--gray-text); line-height:1.9; margin-bottom:12px;}
.about-purpose-text p:last-child{margin-bottom:0;}
.about-orgs{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.about-org{
  display:flex; flex-direction:column; align-items:center; gap:8px; width:150px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 10px;
  box-shadow:var(--shadow); text-align:center; transition:box-shadow .2s, transform .2s;
}
.about-org:hover{box-shadow:0 12px 28px rgba(18,59,107,0.14); transform:translateY(-2px);}
.about-org img{height:34px; width:100%; object-fit:contain;}
.about-org span{font-size:11.5px; font-weight:700; color:#2A303C;}

/* ===== Three directions ===== */
.about-directions{padding:44px 0;}
.direction-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.direction-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 22px; box-shadow:var(--shadow); text-align:center;}
.direction-card .direction-icon{width:72px; height:72px; margin:0 auto 16px; display:block;}
.direction-card h3{font-size:16px; margin-bottom:8px;}
.direction-card p{font-size:13px; color:var(--gray-text); line-height:1.8; text-align:left;}

/* ===== Cycle ===== */
.about-cycle{padding:44px 0;}
.about-cycle-text{max-width:70ch; margin:0 auto 28px; text-align:center;}
.about-cycle-text p{font-size:14.5px; color:var(--gray-text); line-height:1.9;}
.cycle-panel{background:#fff; border-radius:24px; padding:36px 30px; text-align:center;}
.cycle-panel img{max-width:832px; width:100%; height:auto; margin:0 auto; display:block;}

/* ===== Closing message ===== */
.about-message{background:var(--bg-soft); text-align:center; padding:44px 0;}
.about-message h2{font-size:22px; margin-bottom:18px;}
.about-message-steps{display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-bottom:20px;}
.about-message-steps span{background:#fff; border:1px solid var(--line); border-radius:24px; padding:14px 28px; font-size:17px; font-weight:900; color:var(--blue-dark); box-shadow:var(--shadow);}
.about-message p{color:var(--gray-text); font-size:13.5px; max-width:64ch; margin:0 auto 24px;}
.about-message-actions{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .direction-grid{grid-template-columns:1fr;}
  .about-hero h1{font-size:26px;}
  .about-hero .lead{font-size:17px;}
  .about-orgs{grid-template-columns:repeat(2,1fr); display:grid;}
}
@media (max-width:600px){
  .about-org{width:auto; max-width:none;}
  .about-message-steps{flex-direction:column; align-items:center;}
  .about-message-actions{flex-direction:column; align-items:stretch;}
}