/* =========================================================
   katsudo.css
   第2階層「活動内容」ページ（katsudo.html）専用スタイル
   ========================================================= */

/* ===== Hero (page header + intro + cycle diagram) ===== */
.katsudo-hero{position:relative; overflow:hidden;}
.katsudo-hero::before{
  content:''; position:absolute; inset:0;
  background:url('../images/katsudo-hero-bg.jpg') center/cover no-repeat;
  opacity:.34; z-index:0;
}
.katsudo-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 30%, rgba(234,243,252,.55) 58%, rgba(234,243,252,.35) 100%);
  z-index:0;
}
.katsudo-hero > *{position:relative; z-index:1;}

/* ===== Cycle diagram hero ===== */
.cycle-section{padding-top:36px; padding-bottom:24px;}
.katsudo-hero-flex{position:relative;}
.katsudo-hero-text{position:absolute; top:0; left:0; max-width:300px; z-index:2;}
.katsudo-hero-text h1{font-size:30px; font-weight:900; margin-bottom:14px;}
.katsudo-hero-text p{color:var(--gray-text); font-size:13.5px; line-height:1.9;}
.cycle-diagram-img{display:block; width:100%; max-width:829px; height:auto; margin:0 auto;}

/* ===== Model business banner ===== */
.model-banner{background:var(--blue-dark); border-radius:16px; padding:18px 26px; display:flex; align-items:center; gap:20px; color:#fff; margin-top:28px;}
.model-banner .icon-badge{width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.model-banner .icon-badge svg{width:24px; height:24px;}
.model-banner .text{flex:1; min-width:0;}
.model-banner h3{color:#fff; font-size:16px; margin-bottom:6px;}
.model-banner .tag{display:inline-block; background:rgba(255,255,255,.15); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:12px; margin-bottom:6px;}
.model-banner p.desc{color:#C7D4E3; font-size:12.5px;}
.model-banner .illust{width:110px; flex-shrink:0;}

/* ===== Activity detail heading ===== */
.activity-detail-head{display:flex; align-items:baseline; gap:14px; margin-bottom:18px; border-left:5px solid var(--blue); padding-left:14px;}
.activity-detail-head h2{font-size:22px;}

/* ===== Activity rows ===== */
.activity-row{margin-bottom:20px;}
.activity-row:last-child{margin-bottom:0;}

.activity-row-inner{border-radius:18px; padding:22px 26px;}
.activity-row.is-green .activity-row-inner{background:var(--green-soft);}
.activity-row.is-blue .activity-row-inner{background:var(--blue-soft);}
.activity-row.is-orange .activity-row-inner{background:var(--orange-soft);}

.activity-row-body{display:flex; align-items:flex-start; gap:22px;}

.activity-label{width:190px; flex-shrink:0;}
.activity-label .icon-badge{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.activity-label .icon-badge svg{width:20px; height:20px;}
.activity-label h3{font-size:16px; margin-bottom:8px;}
.activity-row.is-green .activity-label h3{color:var(--green);}
.activity-row.is-blue .activity-label h3{color:var(--blue);}
.activity-row.is-orange .activity-label h3{color:var(--orange);}
.activity-label p{font-size:12px; color:var(--gray-text); line-height:1.6;}

.activity-photos{flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.activity-photo-card{background:#fff; border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:visible;}
.activity-photo-card .photo{position:relative; height:92px; flex-shrink:0; border-radius:14px 14px 0 0; overflow:hidden;}
.activity-photo-card .photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
.photo-badge{position:absolute; right:12px; bottom:-14px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:2;}
.photo-badge svg{width:14px; height:14px;}
.activity-photo-card .body{padding:20px 16px 14px; flex:1;}
.activity-photo-card--text .body{padding-top:18px;}
.activity-photo-card h4{font-size:13.5px; margin-bottom:5px;}
.activity-photo-card p{font-size:11.5px; color:var(--gray-text);}
.tag-pills{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;}
.tag-pill{display:inline-block; background:var(--bg-soft); color:var(--blue-dark); font-size:10px; font-weight:700; padding:3px 8px; border-radius:9px;}

.activity-feature{display:flex; align-items:stretch; gap:20px;}
.activity-feature-card{flex:1; min-width:0; display:flex; background:#fff; border-radius:14px; box-shadow:var(--shadow); overflow:hidden;}
.activity-feature-photos{flex:1; min-width:0; display:flex;}
.activity-feature-photos img{flex:1; width:50%; height:190px; object-fit:cover; display:block;}
.activity-feature-panel{width:260px; flex-shrink:0; padding:10px 22px; display:flex; flex-direction:column; justify-content:center;}
.activity-feature-panel h4{font-size:14.5px; margin-bottom:5px; color:var(--blue-dark);}
.activity-feature-panel p{font-size:11.5px; color:var(--gray-text); line-height:1.5;}

/* ===== Final CTA ===== */
.katsudo-cta{background:var(--bg-soft); text-align:center; padding:32px 0;}
.katsudo-cta h2{font-size:22px; margin-bottom:16px;}
.katsudo-cta-actions{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .katsudo-hero-text{position:static; max-width:none; margin-bottom:18px; text-align:center;}
  .cycle-diagram-img{max-width:372px;}

  .model-banner{flex-direction:column; text-align:center;}
  .model-banner .illust{width:110px;}

  .activity-row-body{flex-direction:column;}
  .activity-label{width:auto;}

  .activity-feature{flex-direction:column;}
  .activity-feature-card{flex-direction:column;}
  .activity-feature-photos img{height:160px;}
  .activity-feature-panel{width:auto;}
}
@media (max-width:600px){
  .activity-photos{grid-template-columns:1fr;}
  .katsudo-cta-actions{flex-direction:column; align-items:stretch;}
}