/* ============================================================
   機能カテゴリ：共有スタイル
   - LP内の機能一覧セクション（index.html）と
     各カテゴリ専用ページ（lesson/operations/marketing.html）で共用
   - トーン: オフホワイト背景 / カテゴリ色（青=レッスン・橙=運営・桃=集客）
            英語サブ=青アクセント / ボタン=濃紺アウトラインpill
============================================================ */
:root{
  --c-ink:#0f1b2e; --c-ink2:#54627b; --c-ink3:#8a99b3;
  --c-blue:#2f6bff; --c-navy:#16244a;
  --c-line:rgba(15,27,45,.08);
  --cat-lesson:linear-gradient(135deg,#3b82f6,#2f6bff 55%,#1b4dd8);
  --cat-ops:linear-gradient(135deg,#ffb057,#ff8a3d 55%,#f2701f);
  --cat-mkt:linear-gradient(135deg,#ff8fb3,#ff5d8f 55%,#ec3f73);
  --cat-lesson-solid:#2f6bff; --cat-ops-solid:#f2701f; --cat-mkt-solid:#ec3f73;
}

/* ---------- 機能カード（添付デザイン準拠：左=色つき画像／右=テキスト＋pillボタン） ---------- */
.fcat-card{display:flex;align-items:stretch;background:#fff;border-radius:22px;overflow:hidden;
  border:1px solid var(--c-line);box-shadow:0 12px 30px rgba(20,50,100,.08);
  text-decoration:none;color:inherit;transition:transform .22s ease,box-shadow .22s ease}
.fcat-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(20,50,100,.16)}
.fcat-media{flex:0 0 40%;min-height:176px;display:grid;place-items:center;padding:24px;position:relative}
.fcat-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.fcat-media .ic{position:relative;z-index:1;width:104px;height:104px;border-radius:22px;display:grid;place-items:center;
  font-size:50px;line-height:1;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px rgba(0,0,0,.16)}
.fcat-body{flex:1;min-width:0;padding:24px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.fcat-body h3{font-size:20px;font-weight:900;color:var(--c-ink);line-height:1.3}
.fcat-body .en{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--c-blue)}
.fcat-body p{font-size:13.5px;color:var(--c-ink2);line-height:1.72;margin:3px 0 4px}
.fcat-body .more{margin-top:auto;display:inline-block;font-size:13px;font-weight:800;color:var(--c-navy);
  border:1.6px solid var(--c-navy);border-radius:999px;padding:9px 24px;background:#fff;
  transition:background .2s ease,color .2s ease}
.fcat-card:hover .more{background:var(--c-navy);color:#fff}

/* カテゴリ別の塗り */
.cat-lesson .fcat-media{background:var(--cat-lesson)}
.cat-ops   .fcat-media{background:var(--cat-ops)}
.cat-mkt   .fcat-media{background:var(--cat-mkt)}

/* レスポンシブ：狭幅では画像を上に積む */
@media(max-width:540px){
  .fcat-card{flex-direction:column}
  .fcat-media{flex-basis:auto;min-height:148px;padding:26px}
  .fcat-media .ic{width:84px;height:84px;font-size:40px;border-radius:18px}
  .fcat-body{padding:20px 22px 24px}
}

/* ---------- LP内セクション：カテゴリ見出し＋2列グリッド ---------- */
.fcat-group{margin-top:44px}
.fcat-group:first-of-type{margin-top:8px}
.fcat-head{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;margin-bottom:18px}
.fcat-head .bar{width:28px;height:6px;border-radius:3px;flex:none}
.cat-lesson .fcat-head .bar{background:var(--cat-lesson-solid)}
.cat-ops   .fcat-head .bar{background:var(--cat-ops-solid)}
.cat-mkt   .fcat-head .bar{background:var(--cat-mkt-solid)}
.fcat-head h3{font-size:23px;font-weight:900;color:var(--c-ink)}
.fcat-head .en{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--c-blue)}
.fcat-head .go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;
  color:var(--c-navy);border:1.5px solid var(--c-line);border-radius:999px;padding:7px 15px;white-space:nowrap;
  transition:border-color .2s ease,background .2s ease}
.fcat-head:hover .go{border-color:var(--c-navy);background:#fff}
.fcat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.fcat-grid{grid-template-columns:1fr}}

/* カテゴリ内で従来デザインのカード(.fcard)をリンク化して使う場合の調整 */
a.fcard{text-decoration:none;color:inherit}

/* 機能カードのアイコンを画像にする場合（例：運動能力測定） */
.fcard .ico.ico-img{background:none;border:none;padding:0;overflow:hidden;box-shadow:none}
.fcard .ico.ico-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:11px}

/* ============================================================
   カテゴリ専用ページ
============================================================ */
.cat-page{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--c-ink);background:linear-gradient(180deg,#fbfdff 0%,#f4f7fb 100%);-webkit-font-smoothing:antialiased}
.cat-wrap{max-width:1040px;margin:0 auto;padding:0 22px}

/* nav */
.cat-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line)}
.cat-nav .inner{max-width:1040px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:16px}
.cat-nav .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.cat-nav .brand img{width:30px;height:30px}
.cat-nav .brand span{font-weight:900;font-size:19px;letter-spacing:.02em;
  background:var(--cat-lesson);-webkit-background-clip:text;background-clip:text;color:transparent}
.cat-nav .sp{flex:1}
.cat-nav a.lnk{text-decoration:none;color:var(--c-ink2);font-weight:700;font-size:13.5px}
.cat-nav a.btn-cta{text-decoration:none;font-weight:800;font-size:13.5px;color:#fff;background:var(--c-blue);
  border-radius:999px;padding:10px 20px;box-shadow:0 8px 20px rgba(47,107,255,.3)}

/* hero */
.cat-hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:96px 22px 84px}
.cat-hero::before{content:"";position:absolute;inset:0;z-index:0}
.cat-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent 75%)}
.lesson-page .cat-hero::before{background:var(--cat-lesson)}
.ops-page    .cat-hero::before{background:var(--cat-ops)}
.mkt-page    .cat-hero::before{background:var(--cat-mkt)}
.cat-hero>*{position:relative;z-index:1}
.cat-hero .glyph{font-size:64px;line-height:1;margin-bottom:14px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25))}
.cat-hero .ey{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 16px;margin-bottom:16px}
.cat-hero h1{font-size:clamp(28px,5vw,46px);font-weight:900;line-height:1.28;margin:0 0 14px;
  text-shadow:0 2px 24px rgba(0,0,0,.25)}
.cat-hero p.lead{font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,.92);max-width:620px;margin:0 auto;line-height:1.8}

/* features (縦並び・1カラム) */
.cat-feats{padding:64px 0 24px}
.cat-feats .sec-title{text-align:center;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--c-blue);margin-bottom:30px}
.cat-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.cat-list .fcat-media{flex-basis:38%}

/* CTA */
.cat-cta{text-align:center;padding:30px 22px 92px}
.cat-cta .box{max-width:760px;margin:0 auto;background:linear-gradient(135deg,#eef4ff,#e0ebff);
  border:1px solid rgba(47,107,255,.18);border-radius:22px;padding:56px 28px}
.cat-cta h2{font-size:clamp(22px,3.4vw,30px);font-weight:900;margin:0 0 12px}
.cat-cta p{color:var(--c-ink2);font-size:14.5px;margin:0 0 26px}
.cat-cta a.btn-try{display:inline-block;text-decoration:none;font-weight:800;font-size:16px;color:#fff;
  background:var(--c-blue);border-radius:999px;padding:16px 38px;box-shadow:0 14px 30px rgba(47,107,255,.34)}
.cat-cta .note{margin-top:16px;font-size:12.5px;color:var(--c-ink3)}

/* footer */
.cat-foot{border-top:1px solid var(--c-line);background:#fff;padding:30px 22px;text-align:center}
.cat-foot a{color:var(--c-ink2);text-decoration:none;font-size:13px;font-weight:700;margin:0 10px}
.cat-foot .cp{margin-top:12px;font-size:12px;color:var(--c-ink3)}