.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

section{padding:64px 0;}
section.alt{background:var(--white);}
.eyebrow{color:var(--gold-strong); font-weight:700; font-size:13px; letter-spacing:0.08em; margin-bottom:8px;}
h2{font-size:26px; color:var(--navy); margin:0 0 12px;}
h3{color:var(--navy);}
.lead{color:var(--text-sub); font-size:15px; max-width:680px;}

.page-hero{
  position:relative; color:#fff; overflow:hidden;
  background:
  linear-gradient(105deg, rgba(15,32,25,0.86) 0%, rgba(15,32,25,0.55) 60%, rgba(15,32,25,0.2) 100%),
  url("../assets/method.webp") center/cover no-repeat,
  linear-gradient(135deg,#163a2e,#24483c);
}
.page-hero .wrap{position:relative; z-index:2; padding:72px 24px 60px;}
.page-hero .eyebrow{color:var(--gold);}
.page-hero h1{font-size:32px; margin:8px 0 12px;}
.page-hero p{color:#e4e6e0; font-size:15px; max-width:640px; margin:0;}
.crumb{font-size:12px; color:#c9cdc2; margin-bottom:12px;}
.crumb a{color:#c9cdc2;}

.principle-list{margin-top:32px; display:flex; flex-direction:column; gap:0;}
.principle{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--border);}
.principle:last-child{border-bottom:1px solid var(--border);}
.principle-num{font-size:22px; font-weight:700; color:var(--gold-strong);}
.principle h3{font-size:17px; margin:0 0 8px;}
.principle p{font-size:14px; color:var(--text-sub); margin:0; max-width:660px;}
.principle p b{color:var(--navy);}

.cycle-row{display:flex; gap:0; margin-top:32px;}
.cycle-step{flex:1; text-align:center; position:relative; padding:0 12px;}
.cycle-step:not(:last-child)::after{content:"→"; position:absolute; top:16px; right:-6px; color:var(--border); font-size:14px;}
.cycle-num{width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin:0 auto 10px;}
.cycle-step h3{font-size:13px; margin:0 0 6px; color:var(--navy);}
.cycle-step p{font-size:12px; color:var(--text-sub); margin:0;}

.track-wrap{margin-top:28px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--white);}
table.track{width:100%; border-collapse:collapse; font-size:13px;}
table.track th{background:var(--navy); color:#fff; text-align:left; padding:12px 16px; font-weight:500;}
table.track td{padding:12px 16px; border-top:1px solid var(--border);}
table.track tr:nth-child(even) td{background:var(--bg);}
.status{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;}
.status.ok{background:rgba(99,153,34,0.15); color:#3b6d11;}
.status.warn{background:rgba(212,140,0,0.15); color:#8a5a00;}
.status.risk{background:rgba(226,75,74,0.15); color:#a32d2d;}

.cadence-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px;}
.cadence-card{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:22px;}
.cadence-card .freq{font-size:12px; color:var(--gold-strong); font-weight:700; margin:0 0 8px;}
.cadence-card h3{font-size:15px; margin:0 0 8px; color:var(--navy);}
.cadence-card p{font-size:13px; color:var(--text-sub); margin:0;}

.final-cta{background:var(--navy); color:#fff; text-align:center; padding:56px 0;}
.final-cta h2{color:#fff;}
.final-cta p{color:#c7c9c0; margin:0 0 24px;}
.final-cta .btn-primary{background:var(--gold-strong); color:#fff; padding:14px 32px; font-size:14px;}

@media(max-width:860px){

  .principle{grid-template-columns:48px 1fr; gap:14px;}
  .cycle-row{flex-direction:column; gap:16px;}
  .cycle-step:not(:last-child)::after{display:none;}
  .cadence-grid{grid-template-columns:1fr;}

}


/* =========================================================
   レスポンシブ（下層ページ共通）
   ※ common.css より後に読み込まれるので、ここで上書きする
   ========================================================= */
@media(max-width:1024px){
  section{padding:44px 0;}
  .page-hero .wrap{padding-top:52px; padding-bottom:40px;}
  .page-hero h1{font-size:27px;}
}
@media(max-width:600px){
  .page-hero .wrap{padding-left:16px; padding-right:16px; padding-top:36px; padding-bottom:28px;}
  .page-hero h1{font-size:22px; line-height:1.45;}
  .page-hero p{font-size:14px;}
  .crumb{font-size:11px; margin-bottom:10px;}
  section{padding:34px 0;}
  h2{font-size:19px;}
  .final-cta{padding:40px 0;}
  .final-cta .btn-primary{padding:13px 22px;}
}

@media(max-width:600px){
  .principle{grid-template-columns:40px 1fr; gap:12px;}
  .cadence-card{padding:18px;}
  .sheet{overflow-x:auto;}
  table.sheet-tbl{min-width:420px;}
}