
/* v45 common (same taste) */
:root{ --side:340px; --header-h:56px }
*{ box-sizing:border-box }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans JP',sans-serif; color:#0f172a; background:#f7fafc }
a{ color:#0f5bd5; text-decoration:none } a:hover{ text-decoration:underline }
.wrap{ display:flex; min-height:100vh }
.sidebar{ position:fixed; left:0; top:0; bottom:0; width:var(--side); background:#fff; border-right:1px solid #eef2f7; padding:24px 22px; overflow:auto }
.brand{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:12px }
.brand-home{ display:inline-flex; align-items:center }
.brand-logo{ height:26px }
.brand-sub{ font-size:14px; color:#444; text-align:center }
.burger{ display:none }
nav ul{ list-style:none; margin:18px 0 0; padding:0 }
nav li{ margin:14px 0 }
nav a{ display:block; padding:8px 10px; border-radius:8px; color:#0f172a; position:relative }
@media (min-width:1024px){
  nav a:hover{ color:#e5002a; background:transparent }
  nav a:hover::after{ content:'\25B6'; display:inline-block; margin-left:6px; color:#e5002a; transform:translateY(-1px); transition:transform .14s ease }
  nav a:hover::after{ transform:translate(4px,-1px) }
}
.cta{ display:block; margin-top:18px; background:#e5002a; color:#fff; text-align:center; padding:14px 16px; border-radius:10px; font-weight:700 }
main.content{ margin-left:var(--side); padding:0 }
.container{ max-width:1080px; margin:0 auto; padding:32px 24px }
article.prose{ max-width:900px; margin:0 auto; line-height:1.9 }
article.prose h1{ font-size:28px; margin:0 0 10px }
article.prose h2{ font-size:22px; margin:20px 0 10px }
.lead-block{ padding:16px 18px; border:1px solid #e6eef6; background:#f6fbff; border-radius:12px; margin:0 0 18px }
.kv{ margin:-8px 0 20px; border-radius:14px; overflow:hidden; background:#000 }
.kv .img{ width:100%; height:clamp(220px, 32vw, 380px); object-fit:cover; display:block; }
.kv.overlay{ position:relative; background:#000 }
.kv.overlay .img{ opacity:.72; display:block }
.kv.overlay .cap{ position:absolute; left:20px; bottom:18px; color:#fff }
.kv.overlay .cap h1{ margin:0 0 4px; font-size:28px; line-height:1.2 }
.kv.overlay .cap p{ margin:0; font-size:14px; opacity:.9 }
.posts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:20px 0 }
.post{ display:block; border:1px solid #eaecef; border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 4px 14px rgba(15,23,42,.04) }
.post .thumb{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center }
.post .meta{ padding:12px 12px 14px }
.post h3{ margin:0; font-size:16px; line-height:1.5; color:#0f172a }
@media (max-width:1023px){
  :root{ --side:0 }
  .wrap{ display:block }
  .sidebar{ position:fixed; top:0; left:0; right:0; bottom:auto; width:auto; height:var(--header-h); background:#fff; border-right:none; border-bottom:1px solid #eaecef; padding:10px 14px; z-index:1000; display:flex; align-items:center }
  .brand{ flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; width:100%; margin:0 }
  .brand-logo{ height:24px }
  .brand-sub{ font-size:14px; margin-left:8px; text-align:left }
  .burger{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #e6e6e6; border-radius:10px; background:#fff; margin-left:auto }
  #nav{ position:fixed; top:var(--header-h); left:0; right:0; background:#fff; border-bottom:1px solid #eaecef; box-shadow:0 8px 24px rgba(15,23,42,.08); max-height:calc(100vh - var(--header-h)); overflow:auto; display:none; padding:10px 14px 14px; z-index:999 }
  #nav.open{ display:block }
  #nav ul{ margin:8px 0 0 }
  #nav li{ margin:10px 0 }
  #nav a{ padding:10px 12px; border-radius:8px }
  .cta{ margin-top:12px }
  main.content{ margin-left:0 }
  .container{ padding:20px 16px }
  body:not(.menuOpen) main.content{ padding-top:var(--header-h) }
  body.menuOpen{ overflow:hidden }
  .posts{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px }
}
@media (max-width:520px){
  .posts{ grid-template-columns:1fr }
}
/* ===== v67: mobile fixed CTA & spacing (global) ===== */
@media (max-width:1023px){
  :root{ --mobile-cta-h: 88px; }
  .mobile-cta-fixed{
    position:fixed; left:0; right:0; bottom:0;
    background:transparent;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    z-index:1100;
    pointer-events:none;
  }
  .mobile-cta-fixed .btn{
    pointer-events:auto;
    display:block; text-align:center;
    background:#e5002a; color:#fff;
    padding:14px 16px; border-radius:10px; font-weight:700;
    box-shadow:0 6px 18px rgba(229,0,42,.25);
  }
  body.menuOpen .mobile-cta-fixed{ display:none !important; }
  .container{ padding-bottom: calc(var(--mobile-cta-h) + 16px); }
  .site-footer{ padding-bottom: calc(18px + var(--mobile-cta-h) + env(safe-area-inset-bottom)); }
}
@media (min-width:1024px){
  .mobile-cta-fixed{ display:none }
}
/* ===== v69: mobile menu z-index / burger tap / hide CTA in menu / footer spacing ===== */
@media (max-width:1023px){
  .burger{ touch-action: manipulation; -webkit-tap-highlight-color: transparent; position:relative; z-index: 1400; }
  #nav{
    position: fixed;
    top: var(--header-h,56px);
    left: 0; right: 0;
    max-height: calc(100vh - var(--header-h,56px));
    overflow: auto;
    background: #f7f7f7;
    border-bottom: 1px solid #eaecef;
    box-shadow: 0 8px 24px rgba(15,23,42,.12);
    z-index: 3000;
    display: none;
  }
  #nav.open{ display: block !important; }
  /* Hide any CTA inside the dropdown menu */
  #nav .cta, #nav .mobile-cta-fixed{ display: none !important; }
  /* Footer/copyright stays visible above safe-area; content not hidden by CTA */
  :root{ --mobile-cta-h: 88px; }
  .container{ padding-bottom: calc(var(--mobile-cta-h) + 16px); }
  .site-footer{ text-align:center; color:#64748b; padding: 18px 12px calc(18px + var(--mobile-cta-h) + env(safe-area-inset-bottom)); margin-top:24px; }
  /* While menu open, footer CTA is hidden via JS + this CSS in earlier steps */
  body.menuOpen .mobile-cta-fixed{ display: none !important; }
}
@media (min-width:1024px){
  .mobile-cta-fixed{ display:none }
}
/* ===== v70: PC footer centered under content; ensure CTA hidden in menu ===== */
@media (min-width:1024px){
  .site-footer{
    max-width: 1080px; /* same as .container */
    margin: 24px auto; /* center within main content area */
    text-align: center;
  }
}
@media (max-width:1023px){
  #nav .cta, #nav .mobile-cta-fixed{ display: none !important; }
}
/* ===== v71: mobile layering & interaction safety ===== */
@media (max-width:1023px){
  .burger{ position:relative; z-index: 5100; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  #nav{ z-index: 5000; display:none; position:fixed; top: var(--header-h,56px); left:0; right:0;
       max-height: calc(100vh - var(--header-h,56px)); overflow:auto; background:#fff;
       border-bottom:1px solid #eaecef; box-shadow:0 8px 24px rgba(15,23,42,.12); }
  #nav.open{ display:block !important; }
  /* Prevent footer CTA from intercepting taps over the menu area */
  .mobile-cta-fixed{ pointer-events:none; z-index: 1100; }
  .mobile-cta-fixed .btn{ pointer-events:auto; }
  /* Never show CTA inside the menu */
  #nav .cta, #nav .mobile-cta-fixed{ display:none !important; }
}
/* v72: ensure CTA hidden inside menu on mobile */
@media (max-width:1023px){
  #nav .cta, #nav .mobile-cta-fixed{ display:none !important; }
}
/* ===== v73: CSS-only independent mobile menu ===== */
@media (max-width:1023px){
  /* Controller */
  #menuToggle{ position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; top:0; left:0; z-index:-1; }
  /* Proxy burger button (independent of existing DOM) */
  #burgerProxy{
    position:fixed; top:10px; right:12px; width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid #e6e6e6; border-radius:10px; background:#fff;
    z-index:6000;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  /* Scrim */
  #cssmenu-scrim{
    position:fixed; inset:0; background:rgba(15,23,42,.35); backdrop-filter:saturate(160%) blur(2px);
    z-index:5490; display:none;
  }
  #menuToggle:checked ~ #cssmenu-scrim{ display:block }
  /* Drawer */
  #mnav{
    position:fixed; top:56px; left:0; right:0; max-height:calc(100vh - 56px); overflow:auto;
    background:#fff; border-bottom:1px solid #eaecef; box-shadow:0 8px 24px rgba(15,23,42,.12);
    z-index:5500; display:none;
  }
  #menuToggle:checked ~ #mnav{ display:block }
  #mnav ul{ list-style:none; margin:0; padding:10px 12px }
  #mnav li{ margin:10px 0 }
  #mnav a{ display:block; padding:10px 12px; border-radius:10px; color:#0f172a; text-decoration:none }
  /* Hide original mobile dropdown to avoid conflicts */
  .sidebar #nav, #nav{ display:none !important; }
  /* Hide CTA while open and never show inside menu */
  #menuToggle:checked ~ .mobile-cta-fixed{ display:none !important; }
  #mnav .mobile-cta-fixed, #mnav .cta{ display:none !important; }
  /* Reserve space for header */
  main.content{ margin-left:0 !important }
  .container{ padding-top:56px; }
  /* Hide proxy on desktop */
}
@media (min-width:1024px){
  #burgerProxy, #menuToggle, #cssmenu-scrim, #mnav{ display:none !important; }
}

/* === v91: consolidated overrides (final) === */

/* 1) Mobile burger position & menu hygiene */
@media (max-width:1023px){
  #burgerProxy{
    top: calc(var(--header-h,56px)/2 - 21px) !important;
    right: calc(env(safe-area-inset-right) + 14px) !important;
  }
  /* Hide CTA inside mobile menus */
  #nav .cta, #nav .mobile-cta-fixed,
  #mnav .cta, #mnav .mobile-cta-fixed{ display:none !important; }

  /* Mobile drawer divider */
  #mnav li.divider{ border-top:2px solid #ccd6e3; margin-top:10px; padding-top:10px; }
}

/* 2) PC-only: hide mobile-only items */
@media (min-width:1024px){
  #nav li.only-mobile{ display:none !important; }
}

/* 3) HERO caption: p above h1; full-width translucent band; aligned starts; square edges */
.kv .cap, .kv.overlay .cap{ display:flex; flex-direction:column; }
.kv.overlay .cap{ left:0 !important; right:0 !important; } /* stretch across image */
.kv .cap .lead, .kv.overlay .cap .lead{
  order:-1;
  margin-bottom:.25em;
  font-size: clamp(22px, 5.4vw, 40px) !important;  /* PC調整済み */
  line-height:1.25;
  letter-spacing:.01em;
  padding-left:20px; padding-right:20px;
}
.kv .cap h1, .kv.overlay .cap h1{
  display:block; width:100%; box-sizing:border-box;
  margin:0; padding:.15em 20px;
  color:#fff !important; background:rgba(255,255,255,.28);
  border-radius:0 !important;
  font-size: clamp(20px, 4.8vw, 36px) !important;
}
/* phones: lead a bit smaller */
@media (max-width:480px){
  .kv .cap .lead, .kv.overlay .cap .lead{
    font-size: clamp(18px, 4.8vw, 26px) !important;
  }
}

/* 4) Skills list: no auto numbers/bullets; zero left indent */
.prose .skill-list, .richtext .skill-list{
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.prose .skill-list li, .richtext .skill-list li{ margin-left:0 !important; padding-left:0 !important; }
.prose .skill-list li::before, .richtext .skill-list li::before,
.prose .skill-list li::marker, .richtext .skill-list li::marker{ content:none !important; }

/* 5) Desktop-only: narrow content under HERO to ~90% width */
@media (min-width:1024px){
  article.prose .sec:not(.sec-hero) > *{
    width: 90% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  article.prose .sec:not(.sec-hero) .richtext,
  article.prose .sec:not(.sec-hero) .ttl-lg,
  article.prose .sec:not(.sec-hero) .skill-list,
  article.prose .sec:not(.sec-hero) .posts,
  article.prose .sec:not(.sec-hero) .sec-entry{
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === v91a: Desktop-only — content text +2pt (HERO以外) === */
@media (min-width:1024px){
  /* HEROの次以降の本文コンテナを基準 +2pt に */
  article.prose .sec:not(.sec-hero) .richtext{
    font-size: calc(1rem + 2pt);
  }
  /* 段落・リスト・表の文字は親サイズを継承 */
  article.prose .sec:not(.sec-hero) .richtext p,
  article.prose .sec:not(.sec-hero) .richtext li,
  article.prose .sec:not(.sec-hero) .richtext dd,
  article.prose .sec:not(.sec-hero) .richtext td,
  article.prose .sec:not(.sec-hero) .richtext th{
    font-size: inherit;
  }
}

/* === SP only: 勤務条件テーブルのラベル潰れ対策（PC/他要素は未変更） === */
@media (max-width:1023px){
  article.prose .sec.sec-job .jobtable{
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 6px;
  }
  article.prose .sec.sec-job .jobtable th{
    width: 8.8em;
    min-width: 8.8em;
    white-space: nowrap;
    word-break: keep-all;
    text-align: left;
    vertical-align: top;
    padding-right: 12px;
  }
  article.prose .sec.sec-job .jobtable td{
    width: auto;
    word-break: normal;
    vertical-align: top;
  }
}


/* === v94: KV rollback to original container width + no-upscale image === */
/* 1) Restore KV container to same width rule as other .sec children (typically 90%) */
@media (min-width:1024px){
  article.prose .sec > .kv,
  article.prose .sec > .kv.overlay{
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
  }
}

/* 2) Do not upscale the KV image beyond its natural size;
      allow responsive downscaling and center it within the block */
article.prose .sec > .kv > img,
article.prose .sec > .kv.overlay > img{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* === v96c: posts ONLY — desktop cap; KV and others untouched === */
/* index.html places .posts directly under article.prose (not inside .sec) */
@media (min-width:1024px){
  article.prose > .posts{
    max-width: 820px !important;   /* ← 調整OK */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



}


/* === v98: FAQセクションの横幅をKV画像と同じに === */
@media (min-width:1024px){
  article.prose .sec.sec-faq {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  article.prose .sec.sec-faq > * {
    width: 100% !important;
    max-width: none !important;
  }
}


/* === FAQ Accordion (global) === */
.faq-item { border-bottom: 1px solid #ddd; }
.faq-question {
  cursor: pointer;
  padding: 18px 20px;
  position: relative;
  font-weight: bold;
  background: #f7f7f7;
  transition: background 0.2s;
}
.faq-question:hover { background: #f7f7f7; }
.faq-question::before {
  content: "Q";
  color: #d50000;
  font-weight: bold;
  margin-right: 8px;
}
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 1.2rem;
  transition: transform 0.2s;
}
.faq-item.active .faq-question::after { content: "−"; }
.faq-answer {
  display: none;
  padding: 15px 20px;
  background: #fff;
  border-top: 1px solid #eee;
  color: #555;
}
.faq-answer::before {
  content: "A ";
  font-weight: bold;
  margin-right: 5px;
}
