:root{
    --ink:#1c2c1d; --ink-2:#3a463b; --sub:#5d6b58; --faint:#66705f;
    --line:#e9e7df; --line-2:#e1ddd2;
    --bg:#ffffff; --bg-2:#f7f5ee; --bg-3:#1c2c1d; --bg-footer:#2c3d2d;
    --accent:#96BA7D; --accent-d:#4f7340; --accent-dd:#3a5730; --accent-soft:#eef3e9;
    --ph:#eef0ea; --ph-2:#e6e9e0; --ph-tx:#aab09f;
    --maxw:1240px; --gut:40px;
    --ease:cubic-bezier(.2,.7,.2,1);
    --spring:cubic-bezier(.34,1.56,.64,1); --hl:#eaf60a;
    --ui:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","YuGothic","Meiryo UI",-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:var(--ui);color:var(--ink);background:var(--bg);line-height:1.95;font-size:16px;
    letter-spacing:.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
    font-feature-settings:"palt" 1}
html{line-break:strict;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}

  h1,h2,h3,.display,.kicker,.statement{font-feature-settings:"palt" 1}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:#cfe0bf;color:var(--ink)}  /* 若草を一段やわらげた淡い緑 */
  button{font-family:inherit}
  :focus-visible{outline:2px solid var(--accent-d);outline-offset:4px;border-radius:2px}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
  /* SPの左右の余白。260813に 24px→20px（本文幅 342→350px）。
     「クライアントはスタートアップからナショナルまで、」が343pxで342pxに1px入らず
     行が割れていたのを解消するため。18ページ×8幅で横スクロール・はみ出しとも0件を確認済み。 */
  @media(max-width:640px){:root{--gut:20px}}
  section{padding:clamp(72px,9vw,136px) 0}
  .alt{background:var(--bg-2)}
  section.alt{padding:clamp(72px,9vw,136px) 0}
  /* （導入帯は2026-06-10フィードバックで削除） */
  .nb{display:inline-block}
  /* S-1: 内部メモは本番非表示（レビュー時は body.preview で点灯） */
  body:not(.preview) .proto-note{display:none!important}

  /* type */
  .kicker{font-size:.75rem;letter-spacing:.3em;font-weight:700;color:var(--accent-d);text-transform:uppercase;
    display:inline-flex;align-items:center;gap:14px}
  .kicker[data-no]:not([data-no=""])::before{content:attr(data-no);color:var(--faint);letter-spacing:.05em}
  .display{font-size:clamp(2.5rem,6.6vw,5.4rem);line-height:1.06;font-weight:700;letter-spacing:-.01em}
  h2.sec{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.4;font-weight:700;letter-spacing:.005em}
  h3{font-weight:700;letter-spacing:.01em}
  .lead{color:var(--ink-2);font-size:clamp(1rem,1.5vw,1.12rem);line-height:2.1;max-width:720px}
  .sub{color:var(--sub)}
  .en-s{color:var(--accent-d);font-weight:400;letter-spacing:.05em}
  .head{margin-bottom:clamp(48px,6vw,84px)}
  .head .kicker{margin-bottom:30px}

  /* reveal */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .stagger.in>*{opacity:1;transform:none}
  .stagger.in>*:nth-child(2){transition-delay:.08s}
  .stagger.in>*:nth-child(3){transition-delay:.16s}
  .stagger.in>*:nth-child(4){transition-delay:.24s}
  .stagger.in>*:nth-child(5){transition-delay:.32s}
  .stagger.in>*:nth-child(6){transition-delay:.4s}

  /* placeholder media */
  .media{position:relative;overflow:hidden;background:var(--ph)}.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--ph-tx);font-size:.83rem;letter-spacing:.24em;text-transform:uppercase;
    background:linear-gradient(135deg,var(--ph) 0%,var(--ph-2) 100%);transition:transform 1.1s var(--ease)}
  .media:hover .ph{transform:scale(1.05)}
  .ar-21x9{aspect-ratio:21/9}.ar-16x9{aspect-ratio:16/9}.ar-3x2{aspect-ratio:3/2}
  .ar-4x3{aspect-ratio:4/3}.ar-1x1{aspect-ratio:1/1}.ar-3x4{aspect-ratio:3/4}.ar-4x5{aspect-ratio:4/5}
  @media(max-width:640px){.ar-21x9{aspect-ratio:16/10}}

  /* header (auto hide) */
  header{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;border-bottom:1px solid transparent;
    transition:border-color .4s}
  header.hide{transform:none}  /* スクロールで隠さず白で固定 */
  header.scrolled{border-bottom-color:var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:84px;transition:height .4s}
  header.scrolled .bar{height:70px}
  .brand{display:flex;align-items:center;gap:13px;cursor:pointer}
  .brand b{font-size:1.32rem;font-weight:700;letter-spacing:.18em}
  .brand span{font-size:.75rem;letter-spacing:.2em;color:var(--sub)}
  nav ul{display:flex;gap:38px;list-style:none;align-items:center}
  nav a{font-size:.81rem;font-weight:700;letter-spacing:.07em;position:relative;cursor:pointer;padding:6px 0;color:var(--ink-2)}
  nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);transition:right .4s var(--ease)}
  nav a:hover,nav a[aria-current]{color:var(--ink)}
  nav a:hover::after,nav a[aria-current]::after{right:0}
  .navcta{border:1.5px solid var(--accent-d);border-radius:40px;padding:9px 20px!important;color:var(--accent-d)!important;transition:background .35s,color .35s,transform .25s}
  .navcta::after{display:none}
  .navcta:hover{background:var(--ink);color:#fff!important}
  .burger{display:none;width:30px;height:18px;position:relative;background:none;border:0;cursor:pointer}
  .burger span{position:absolute;left:0;height:1.5px;width:100%;background:var(--ink);transition:.35s var(--ease)}
  .burger span:nth-child(1){top:0}.burger span:nth-child(2){top:8px}.burger span:nth-child(3){top:16px}
  body.menu .burger span:nth-child(1){top:8px;transform:rotate(45deg)}
  body.menu .burger span:nth-child(2){opacity:0}
  body.menu .burger span:nth-child(3){top:8px;transform:rotate(-45deg)}
  @media(max-width:900px){
    nav ul{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:6px;background:var(--bg);
      transform:translateY(-100%);transition:transform .55s var(--ease);padding:40px}
    body.menu nav ul{transform:none}
    nav a{font-size:1.5rem;letter-spacing:.04em;padding:14px 0}nav a::after{display:none}
    .navcta{border:0;padding:14px 0!important}
    .burger{display:block;z-index:61}
  }

  /* page */
  .page{display:none}.page.show{display:block;animation:enter .7s var(--ease)}
  @keyframes enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  main{padding-top:84px}

  /* hero */
  .hero{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;min-height:calc(100svh - 84px);padding:clamp(60px,8vw,110px) 0}
  @supports not (height:100svh){.hero{min-height:calc(100vh - 84px)}}
  .hero .wrap{position:relative;z-index:2;width:100%}
  .hero .kicker{color:#CDE0BE}
  .hero .kicker[data-no=""]::before{background:var(--accent)}
  .hero .lead{color:rgba(255,255,255,.92)}
  .hero .btn{border-color:rgba(255,255,255,.75);color:#fff}
  .hero .btn::before{background:var(--accent)}
  .hero .btn:hover{border-color:var(--accent);color:var(--ink)}
  .hero .display{max-width:16ch}
  .hero .lead{margin-top:13px;max-width:640px}
  .hero .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:52px}
  .hero .heromedia{margin-top:clamp(60px,9vw,110px)}
  .hero .metarow{display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:22px;padding-top:24px;font-size:.88rem;color:var(--sub)}
  .hero .metarow b{color:var(--ink);font-weight:700;letter-spacing:.04em}

  /* page head */
  .phead{padding:clamp(56px,8vw,110px) 0 0}
  .crumb{font-size:.88rem;letter-spacing:.1em;color:var(--sub);margin-bottom:22px}
  .crumb a{cursor:pointer}.crumb a:hover{color:var(--ink)}
  .phead h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:700;line-height:1.3}
  .phead .en-s{display:block;font-size:.95rem;margin-top:10px}

  /* cols */
  .cols2{display:grid;grid-template-columns:minmax(0,5fr) 7fr;gap:clamp(36px,7vw,110px)}
  @media(max-width:860px){.cols2{grid-template-columns:1fr;gap:40px}}

  /* editorial */
  .editorial{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
  .editorial.rev .e-txt{order:2}.editorial.rev .e-media{order:1}
  .e-media{position:relative}
  .e-media .badge{position:absolute;left:24px;bottom:24px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    padding:16px 20px;border-radius:2px}
  .e-media .badge b{display:block;font-size:1.7rem;font-weight:700;line-height:1}
  .e-media .badge span{font-size:.83rem;color:var(--sub)}
  @media(max-width:860px){.editorial{grid-template-columns:1fr;gap:32px}.editorial.rev .e-txt,.editorial.rev .e-media{order:0}}

  /* numbered rows */
  .rows{border-top:1px solid var(--line)}
  .row{display:grid;grid-template-columns:96px 1fr;gap:32px;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);align-items:baseline}
  a.row,.row[data-go]{cursor:pointer;transition:padding-left .45s var(--ease),background .4s}
  a.row:hover,.row[data-go]:hover{padding-left:14px}
  .row .idx{font-size:.85rem;color:var(--accent-d);font-weight:700;letter-spacing:.12em}
  .row h3{font-size:1.2rem;margin-bottom:10px;transition:color .3s}
  .row .arrow{float:right;color:var(--accent-d);opacity:0;transform:translateX(-8px);transition:.4s var(--ease)}
  .row[data-go]:hover h3{color:var(--accent-d)}
  .row[data-go]:hover .arrow{opacity:1;transform:none}
  .row p{color:var(--sub);font-size:.96rem;max-width:680px}
  @media(max-width:600px){.row{grid-template-columns:1fr;gap:6px;padding:26px 0}}

  /* table */
  .tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
  .tbl th,.tbl td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:.92rem;vertical-align:top;line-height:1.75}
  .tbl th{width:220px;font-weight:700;padding-right:28px;font-size:.78rem;letter-spacing:.18em;color:var(--accent-d);padding-top:15px}
  .tbl td{color:var(--ink-2);letter-spacing:.02em;font-feature-settings:"palt" 1,"tnum" 1}
  @media(max-width:600px){.tbl th,.tbl td{display:block;width:auto}.tbl th{padding:18px 0 2px;border:0}.tbl td{padding:0 0 18px}}

  /* grids */
  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
  .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,32px)}
  @media(max-width:860px){.g3{grid-template-columns:1fr 1fr}.g4{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.g3,.g4{grid-template-columns:1fr}}

  /* work card */
  .work .media{border-radius:2px}
  .work .cap{margin-top:13px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .work h4{font-size:1.05rem}
  .work .meta{font-size:.88rem;color:var(--accent-d);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

  /* member */
  .member .media{border-radius:2px;margin-bottom:18px}
  .member .role{font-size:.83rem;color:var(--accent-d);letter-spacing:.1em;text-transform:uppercase}
  .member h4{font-size:1.12rem;margin:5px 0 8px}
  .member .bio{font-size:.88rem;color:var(--sub);line-height:1.9}

  /* tabs */
  .tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin:40px 0 36px}
  .tabs button{background:none;border:0;cursor:pointer;font-size:.95rem;font-weight:700;color:var(--faint);
    padding:0 0 16px;margin-bottom:-1px;border-bottom:2px solid transparent;transition:.3s}
  .tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}

  /* notice */
  .notice{margin-top:56px;background:var(--bg-3);color:#fff;border-radius:3px;padding:clamp(32px,4vw,52px);
    display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
  .notice h4{font-size:1.15rem}
  .notice p{color:rgba(255,255,255,.7);font-size:.9rem;margin-top:6px;max-width:520px}

  /* statement */
  .statement{font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:700;line-height:1.85;letter-spacing:.02em;max-width:20ch}
  .statement em{font-style:normal;color:var(--accent-d)}

  /* message */
  .msg{font-size:clamp(1rem,1.5vw,1.1rem);line-height:2.2;color:var(--ink-2)}
  .msg+.msg{margin-top:20px}
  .sign{margin-top:28px;font-weight:700;letter-spacing:.04em}

  /* flow */
  .flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
  .flow .s{border:1px solid var(--line);border-radius:40px;padding:9px 20px;font-size:.86rem;font-weight:700}
  .flow .ar{color:var(--accent-d)}

  /* interview */
  .iv{display:flex;gap:26px;align-items:center;padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--line)}
  .iv .media{width:clamp(128px,13vw,176px);flex:0 0 auto;border-radius:50%}
  .iv q{display:block;font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:700;margin-bottom:10px;letter-spacing:.01em}
  .iv small{color:var(--sub);font-size:.86rem}
  @media(max-width:540px){.iv{gap:18px}.iv .media{width:104px}}

  /* faq */
  
  

  /* button */
  .btn{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--ink);color:var(--ink);
    padding:16px 32px;font-size:.88rem;font-weight:700;letter-spacing:.05em;cursor:pointer;background:none;
    border-radius:40px;position:relative;overflow:hidden;isolation:isolate;will-change:transform;
    transition:color .35s,border-color .35s,background .35s,transform .5s var(--spring),box-shadow .35s}
  .btn::before{content:"";position:absolute;inset:0;background:var(--accent-dd);border-radius:inherit;
    transform:scale(1.05) translateY(101%);transition:transform .55s var(--ease);z-index:-1}
  .btn:hover::before{transform:scale(1.05) translateY(0)}
  .btn .ar{transition:transform .5s var(--spring)}.btn:hover .ar{transform:translateX(5px)}
  .btn.solid{background:var(--ink);border-color:var(--ink);color:var(--bg-2)}

  /* form */
  .csplit{display:grid;grid-template-columns:7fr 4fr;gap:clamp(40px,6vw,90px);align-items:start}
  @media(max-width:860px){.csplit{grid-template-columns:1fr}}
  .form{display:grid;gap:26px}
  .field label{display:block;font-size:.86rem;font-weight:700;margin-bottom:10px;letter-spacing:.04em}
  .field label em{font-style:normal;font-size:.75rem;color:#fff;background:var(--accent-d);padding:2px 8px;margin-left:8px;border-radius:2px;letter-spacing:.08em}
  .field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--line-2);background:transparent;
    padding:12px 2px;font-family:var(--ui);font-size:1rem;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
  .field input::placeholder,.field textarea::placeholder{color:var(--faint)}
  .field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
  .seg{display:flex;gap:12px;flex-wrap:wrap}
  .seg label{border:1.5px solid var(--line-2);border-radius:40px;padding:11px 22px;cursor:pointer;font-size:.86rem;font-weight:700;margin:0;display:inline-flex;gap:9px;align-items:center;white-space:nowrap;transition:.3s}
  @media(max-width:420px){.seg{flex-direction:column;align-items:stretch}.seg label{justify-content:flex-start}}
  .seg label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dd)}
  .seg input,.consent input{accent-color:var(--accent-d)}
  .form .consent{display:flex;gap:11px;align-items:center;font-size:.88rem;color:var(--sub);font-weight:400;cursor:pointer;margin:0}
  .form .consent input{width:auto;flex:0 0 auto;margin:0}.form .consent a{color:var(--accent-d);text-decoration:underline}
  .field .err{display:none;color:#c0392b;font-size:.83rem;margin-top:9px}
  .field.bad input,.field.bad textarea{border-bottom-color:#c0392b}
  .field.bad .err{display:block}
  .ok{display:none;border-left:3px solid var(--accent);background:var(--accent-soft);padding:18px 20px;font-weight:700;color:var(--accent-dd);font-size:.92rem}
  .ok.show{display:block}
  .cinfo dl{margin:0}
  .cinfo dt{font-size:.83rem;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-top:13px}
  .cinfo dd{margin:4px 0 0;font-size:.95rem}
  .cinfo .tel{font-size:1.5rem;font-weight:700;letter-spacing:.02em}
  .cinfo a{border-bottom:1px solid var(--line-2)}

  /* footer — 深緑のインク面（色比率: 深緑＝フッターの塗り） */
  footer{background:var(--bg-footer);color:#e9e7da;padding:clamp(36px,4.5vw,56px) 0 22px}
  .fbig{font-size:clamp(2.6rem,9vw,7rem);font-weight:700;letter-spacing:.04em;color:#fff;line-height:.9;margin-bottom:56px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.5fr;gap:32px}
  footer h5{font-size:.75rem;letter-spacing:.26em;color:var(--accent);margin-bottom:8px;text-transform:uppercase;font-weight:700}
  footer ul{list-style:none}footer li{margin-bottom:0}
  footer a{font-size:.88rem;color:#dfe4d4;cursor:pointer;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 calc(100% - 5px);background-size:0 1px;transition:background-size .45s var(--ease),color .3s}
  footer a:hover{color:#fff;background-size:100% 1px;text-decoration:none}
  .addr{font-size:.86rem;line-height:1.9;color:#bcc5b0}
  .copy{margin-top:22px;padding-top:14px;border-top:1px solid rgba(247,245,238,.16);font-size:.78rem;color:#aab59e;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
  @media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}

  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-weight:700;font-size:.85rem}
  .skip:focus{left:0}

  /* to top */
  .totop{position:fixed;right:24px;bottom:24px;z-index:55;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
    background:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s var(--ease);box-shadow:0 8px 30px rgba(0,0,0,.08);font-size:1rem}
  .totop.show{opacity:1;pointer-events:auto}
  .totop:hover{transform:translateY(-3px)}

  /* ===== ナラティブ（感動）構成 ===== */
  .hero-full{position:relative;height:100vh;min-height:600px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
  .hero-full .bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(135deg,#1b2a14,#2f4a23 58%,#3e6030)}
  .hero-full .bg .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.34);
    font-size:.83rem;letter-spacing:.28em;text-transform:uppercase;animation:kenburns 20s ease-in-out infinite alternate}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
  .hero-full .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,14,6,.82),rgba(8,14,6,.2) 52%,rgba(8,14,6,.42))}
  .hero-full .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(56px,9vh,110px)}
  .hero-full .kicker{color:rgba(255,255,255,.8)}
  .hero-full h1{font-size:clamp(2.6rem,7.4vw,6.2rem);line-height:1.04;font-weight:700;letter-spacing:-.01em;margin:24px 0 0}
  .hero-full .jp{font-size:clamp(1.05rem,2vw,1.55rem);font-weight:700;line-height:1.9;margin-top:26px;color:rgba(255,255,255,.92);letter-spacing:.04em}
  .hero-full .actions{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap}
  .hero-full .btn{border-color:rgba(255,255,255,.6);color:#fff}
  .hero-full .btn::before{background:var(--accent)}.hero-full .btn:hover{color:var(--ink);border-color:var(--accent)}
  .hero-full .btn.solid{border-color:var(--accent);background:var(--accent);color:#15211a}
  .scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;font-size:.75rem;letter-spacing:.3em;color:rgba(255,255,255,.7);text-transform:uppercase}
  .scrollcue::after{content:"";display:block;width:1px;height:42px;margin:10px auto 0;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:cue 2s infinite}
  @keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

  .manifesto{padding:clamp(120px,18vw,250px) 0}
  .manifesto p{font-size:clamp(1.5rem,4.2vw,3rem);font-weight:700;line-height:1.85;letter-spacing:.03em;max-width:18ch}
  .manifesto .l{display:block}
  .manifesto .l em{font-style:normal;color:var(--accent-d)}
  .manifesto.stagger .l{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .manifesto.stagger.in .l{opacity:1;transform:none}
  .manifesto.stagger.in .l:nth-child(2){transition-delay:.18s}
  .manifesto.stagger.in .l:nth-child(3){transition-delay:.36s}
  .manifesto.stagger.in .l:nth-child(4){transition-delay:.54s}

  .feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(40px,6vw,80px)}
  .feature:nth-child(even) .f-media{order:2}
  .feature .f-no{font-size:.88rem;color:var(--accent-d);letter-spacing:.12em;font-weight:700}
  .feature h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:12px 0 14px;line-height:1.4}
  .feature p{color:var(--sub);font-size:.96rem}
  @media(max-width:760px){.feature{grid-template-columns:1fr;gap:20px}.feature:nth-child(even) .f-media{order:0}}

  .scale{background:var(--bg-3);color:#fff;text-align:center;position:relative;overflow:hidden}
  .scale .num{font-size:clamp(3.4rem,12vw,9rem);font-weight:700;line-height:1;letter-spacing:-.02em}
  .scale .num em{font-style:normal;color:var(--accent)}
  .scale .cap{font-size:clamp(1rem,1.8vw,1.25rem);color:rgba(255,255,255,.78);margin-top:13px;letter-spacing:.06em}
  .scale .row3{display:flex;justify-content:center;gap:clamp(36px,8vw,110px);margin-top:clamp(56px,7vw,90px);flex-wrap:wrap}
  .scale .row3 b{display:block;font-size:clamp(1.8rem,4vw,3rem);font-weight:700}
  .scale .row3 span{font-size:.88rem;color:rgba(255,255,255,.6);letter-spacing:.08em}

  .closing{position:relative;color:#fff;overflow:hidden;text-align:center}
  .closing .bg{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#22351a,#3e6030)}
  .closing .bg .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(58,68,50,.6);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;animation:kenburns 22s ease-in-out infinite alternate}
  .closing .shade{position:absolute;inset:0;z-index:1;background:rgba(10,18,8,.5)}
  .closing .wrap{position:relative;z-index:2}
  .closing h2{font-size:clamp(1.9rem,5vw,3.6rem);font-weight:700;line-height:1.6;letter-spacing:.02em}
  .closing p{color:rgba(255,255,255,.82);margin:22px auto 36px;max-width:30ch}
  .closing .btn{border-color:#fff;color:#fff}.closing .btn::before{background:var(--accent)}.closing .btn:hover{color:var(--ink);border-color:var(--accent)}
  .closing .btn.solid{background:var(--accent);border-color:var(--accent);color:#15211a}

  .teaser{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

  /* ===== 信頼・実績・温故知新（明朝の格 × ゴシックの実務）===== */
  /* （変数は冒頭:rootに一本化済み） */
  /* フォントは全面UIゴシックに統一（堅実・実務）。信頼/温故知新は色・余白・罫線・構成で表現 */
  .display{letter-spacing:.01em;line-height:1.12}
  h2.sec,.phead h1{letter-spacing:.02em}
  .point .pn,.stat b,.fbig,.brand b{letter-spacing:.06em}

  /* 選ばれる理由（事実訴求のカード） */
  .point{border-top:2px solid var(--ink-2);padding-top:24px}
  .point .pn{font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--accent-d);font-weight:700;letter-spacing:.04em;line-height:1}
  a.point.plink{display:block;color:inherit;cursor:pointer}
  .point h3{font-size:1.2rem}
  .point h3 .arrow{color:var(--accent-d);opacity:0;transition:opacity .3s}
  .point:hover h3 .arrow{opacity:1}
  .point h3{font-size:1.22rem;margin:12px 0 12px}
  .point p{color:var(--sub);font-size:.92rem;line-height:1.95}
  /* 数字で見る */
  .stat{border-top:1px solid var(--line);padding-top:20px}
  .stat b{display:block;font-size:clamp(2.3rem,4.4vw,3.4rem);font-weight:700;line-height:1}
  .stat span{display:block;font-size:.88rem;color:var(--sub);margin-top:10px;letter-spacing:.04em}

  /* 罫線をやや太く・上質に（信頼の几帳面さ） */
  .row,.tbl th,.tbl td,

  /* ===== 磨き込み：simple / clean / stylish ===== */
  /* セクションラベルにアクセントの細線（編集的で上品） */
  .kicker{font-size:.88rem;letter-spacing:.26em;color:var(--accent-d);gap:13px}
  .kicker[data-no=""]::before{content:"";display:inline-block;width:26px;height:1.5px;background:var(--accent);vertical-align:middle}
  /* タイポ階調を引き締め */
  .display{letter-spacing:-.005em;line-height:1.1}
  h2.sec{letter-spacing:.015em;line-height:1.5}
  .lead{color:#5b6258;font-size:1.04rem;line-height:2.15}
  .sec-en,.phead .en-s{font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d)}
  /* 見出しブロック→コンテンツ間は統一（S-5: 5:3の緩急） */
  .head{margin-bottom:clamp(40px,5vw,64px)}
  .head .kicker{margin-bottom:26px}
  /* hairline色は冒頭:rootで定義 */
  /* リンク行：左番号は細く、右に矢印を出して整える */
  .row .idx{color:var(--accent-d);font-weight:700;font-size:.88rem;letter-spacing:.14em}
  .row h3{font-weight:700}
  /* ボタンの字間・高さを微調整 */
  .btn{letter-spacing:.06em;padding:15px 30px}
  /* strengths point：番号を大きく上品に */
  .point{border-top-width:1.5px}
  .point .pn{font-size:1.1rem;letter-spacing:.12em}
  .point h3{font-size:1.2rem;margin:14px 0 12px}
  /* numbers：数字を引き締め */
  .stat b{letter-spacing:.01em}
  /* ナビ・インデックス（TOP下部の導線を上品に） */
  .navindex{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,72px);border-top:1px solid var(--line)}
  .navindex a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:28px 4px 28px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
  .navindex a:hover{border-left-color:var(--accent);color:var(--accent-d)}
  .navindex a .nm{font-size:1.2rem;font-weight:700}
  .navindex a .en{font-size:.83rem;letter-spacing:.16em;color:var(--sub);text-transform:uppercase;margin-left:auto;margin-right:18px}
  .navindex a .ar{color:var(--accent-d);transition:transform .4s var(--ease)}
  .navindex a:hover .ar{transform:translateX(6px)}
  @media(max-width:640px){.navindex{grid-template-columns:1fr}}

  /* 法務（全文ページ） */
  .legal{max-width:800px}
  .legal>.lead{margin:0 0 8px}
  .legal h3{font-size:1.18rem;font-weight:700;margin:52px 0 16px;padding-top:40px;border-top:1px solid var(--line);letter-spacing:.02em}
  .legal h3:first-of-type{border-top:0;padding-top:0;margin-top:8px}
  .legal h4{font-size:.98rem;font-weight:700;color:var(--accent-d);margin:30px 0 8px}
  .legal p{color:var(--ink-2);font-size:.95rem;line-height:2.1;margin-bottom:16px}
  .legal ul{margin:0 0 18px 1.2em;color:var(--ink-2)}
  .legal li{font-size:.95rem;line-height:1.95;margin-bottom:9px}
  .legal a{color:var(--accent-d);text-decoration:underline}
  .legal .updated{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:.86rem;color:var(--faint)}
  .legal .backlink{display:inline-flex;gap:8px;align-items:center;margin-top:28px;font-weight:700;font-size:.85rem;color:var(--accent-d);cursor:pointer}

  /* ============ インタラクション（グリーン基調のホバー）============ */
  ::selection{background:#cfe0bf;color:var(--ink)}  /* 若草を一段やわらげた淡い緑 */
  /* グローバルナビ：文字が濃く＋下線が左→100%（既存）＋CTAは沈んで深緑 */
  nav a:hover{color:var(--ink)}
  .navcta:hover{background:var(--accent-d)!important;border-color:var(--accent-d)!important;color:#fff!important;transform:translateY(1px)}
  /* ボタン：塗り＝深緑＋2px浮上＋淡い緑影／枠線型＝枠と文字が緑 */
  .btn:hover{color:#fff;border-color:var(--accent-dd)}
  /* S-4: 地のボタン＝深緑塗り＋生成り文字。ホバーで若草が立ち上がりインク文字に */
  .btn.solid::before{background:var(--accent)}
  .btn.solid:hover{color:var(--ink);border-color:var(--ink);box-shadow:0 10px 24px rgba(28,44,29,.22)}
  /* S-4: ダーク背景上＝若草塗り＋深緑文字。ホバーで生成りが立ち上がる */
  .hero .btn.solid,.accesspanel .btn.solid{background:var(--accent);border-color:var(--accent);color:#15211a}
  .hero .btn.solid::before,.accesspanel .btn.solid::before{background:var(--bg-2)}
  .hero .btn.solid:hover,.accesspanel .btn.solid:hover{color:var(--ink);border-color:var(--bg-2)}
  /* カード（実績／チーム／選ばれる理由）：枠が緑＋軽く浮いて影 */
  .work,.member{transition:transform .5s var(--spring)}
  .work:hover,.member:hover{transform:translateY(-6px)}
  .work:hover .media,.member:hover .media{outline:1.5px solid var(--accent);outline-offset:0;box-shadow:0 26px 50px -28px rgba(28,44,29,.45)}
  .work .media>img,.member .media>img{transition:transform .8s var(--ease)}
  .work:hover .media>img,.member:hover .media>img{transform:scale(1.03)}
  .point{transition:transform .45s var(--ease),border-color .3s,box-shadow .45s}
  .point:hover{border-top-color:var(--accent);transform:translateY(-5px);box-shadow:0 20px 40px -26px rgba(28,44,29,.35)}
  /* 工程（Process）／各行：淡い緑のみ（paddingは動かさずレイアウトシフト回避） */
  .row{transition:background .3s,padding .4s var(--ease)}
  .row:hover{background:var(--accent-soft)}
  /* 取引先セル：ホバーで緑反転＋白抜き */
  .clients-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .clients-grid div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 18px;font-size:.92rem;font-weight:700;color:var(--ink);transition:background .25s,color .25s}
  .clients-grid div:hover{background:var(--accent-d);color:#fff} /* WCAG AA コントラスト確保 */
  @media(max-width:760px){.clients-grid{grid-template-columns:1fr 1fr}}
  /* フッターのリンク hover は上段の定義（白＋若草の下線）に一本化（260807修正）。
     ここにあった上書き（hover を濃い墨色にする指定）は、地色に対して 1.43:1 となり
     ホバー時に文字がほぼ消えていたため削除した */

  /* MV（ミッション・ビジョン）ページ */
  .mv-block{max-width:928px}
  .mv-key{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:700;line-height:1.32;letter-spacing:.01em;margin:20px 0 0;color:#1c2c1d}
  .mv-sub{margin-top:13px;font-size:.83rem;letter-spacing:.2em;color:var(--accent-d);font-weight:700}
  .mv-text{margin-top:10px;font-size:clamp(1rem,1.5vw,1.12rem);line-height:2.2;color:var(--ink-2);max-width:720px}

  /* 架け橋ダイアグラム（Client →〈Agency＝MIC〉→ Production） */
  .bridge{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;align-items:stretch;margin-top:10px}
  .bnode{border:1.5px solid var(--line);border-radius:6px;padding:22px 20px;background:var(--bg);display:flex;flex-direction:column;justify-content:center;text-align:center}
  .bnode .bl{font-size:.83rem;letter-spacing:.18em;color:var(--faint);text-transform:uppercase;font-weight:700}
  .bnode b{font-size:1.12rem;margin:10px 0 8px}
  .bnode p{font-size:.88rem;color:var(--sub);line-height:1.8}
  .bnode.mic{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 10px 30px rgba(85,122,69,.12)}
  .bnode.mic .bl{color:var(--accent-dd)}.bnode.mic b{color:var(--accent-dd);font-size:1.3rem}
  .barrow{display:flex;align-items:center;justify-content:center;color:var(--accent-d);font-size:1.5rem;padding:0 18px}
  .bcap{text-align:center;font-size:.85rem;color:var(--sub);margin-top:22px;letter-spacing:.04em}
  @media(max-width:760px){.bridge{grid-template-columns:1fr}.barrow{padding:12px 0}.barrow span{display:inline-block;transform:rotate(90deg)}}

  /* 4つの力 */
  .powers{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,64px);border-top:1px solid var(--line);margin-top:8px}
  .pw{border-bottom:1px solid var(--line);padding:24px 0}
  .pw .pn{font-size:.88rem;color:var(--accent-d);font-weight:700;letter-spacing:.12em}
  .pw h3{font-size:1.3rem;margin:12px 0 10px}
  .pw h3 .en{font-size:.88rem;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin-left:10px;font-weight:700}
  .pw p{font-size:.92rem;color:var(--sub);line-height:1.95}
  @media(max-width:680px){.powers{grid-template-columns:1fr}}

  /* ヒーロー動的レイヤー */
  .hero .wrap{position:relative;z-index:3}
  .hero-anim{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
  .hero-anim .ha{position:absolute;display:block}
  .hero-anim .ha1{width:clamp(120px,16vw,260px);right:7%;top:14%;animation:haFloat 13s ease-in-out infinite}
  .hero-anim .ha2{width:clamp(90px,11vw,180px);right:24%;bottom:16%;animation:haFloat 17s ease-in-out infinite reverse}
  .hero-anim .ha3{width:clamp(70px,9vw,150px);right:40%;top:22%;animation:haDrift 21s ease-in-out infinite}
  .hero-anim .ha4{width:18px;right:16%;top:60%;animation:haDrift 15s ease-in-out infinite reverse}
  @keyframes haFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-26px) rotate(6deg)}}
  @keyframes haDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,18px)}}
  @media(max-width:680px){.hero-anim .ha2,.hero-anim .ha3,.hero-anim .ha4{display:none}.hero-anim .ha1{right:-4%;top:8%;opacity:.7}}
  /* 簡単な図：選ばれる理由のアイコン */
  .point .ic{color:var(--accent-d);margin-bottom:16px;display:block}
  /* 簡単な図：男女比バー */
  .ratiobar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:10px;max-width:190px}
  .ratiobar i{background:var(--accent-d)}.ratiobar em{background:var(--accent)}
  .ratio-l{display:block;font-size:.83rem;color:var(--sub);margin-top:8px;letter-spacing:.04em}
  /* グラフ：ドーナツ＋数値 */
  .datawrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,7vw,100px);align-items:center}
  @media(max-width:760px){.datawrap{grid-template-columns:1fr;gap:48px;justify-items:start}}
  .donut{position:relative;width:210px;height:210px}
  .donut svg{width:100%;height:100%;transform:rotate(-90deg)}
  .donut svg circle{transition:stroke-dasharray 1s var(--ease)}
  .donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .donut .center b{font-size:2.6rem;font-weight:700;line-height:1;letter-spacing:.01em}
  .donut .center span{font-size:.83rem;color:var(--sub);margin-top:4px}
  .donut-legend{display:flex;gap:22px;margin-top:20px;font-size:.88rem;color:var(--ink-2)}
  .donut-legend span{display:inline-flex;align-items:center;gap:8px;font-weight:700}
  .donut-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
  @media(max-width:520px){.facts{grid-template-columns:1fr 1fr}}
  /* 図ダッシュボード（創業年数／拠点マップ／男女比） */
  .figgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,5vw,64px);align-items:start;text-align:center}
  @media(max-width:760px){.figgrid{grid-template-columns:1fr;gap:56px}}
  .fig-h{font-size:.75rem;letter-spacing:.18em;color:var(--accent-d);text-transform:uppercase;font-weight:700;margin-bottom:20px}
  .fig-c{font-size:.86rem;color:var(--sub);margin-top:16px;line-height:1.8}
  .bignum{line-height:1}.bignum b{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:700;letter-spacing:.01em}
  .bignum span{font-size:1.05rem;font-weight:700;margin-left:4px;color:var(--ink-2)}
  .timeline{display:flex;align-items:center;gap:12px;margin:13px auto 0;max-width:220px;font-size:.88rem;color:var(--sub);font-weight:700}
  .timeline .tl{flex:1;height:2px;background:linear-gradient(90deg,var(--line),var(--accent));position:relative}
  .timeline .tl::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--accent-d)}
  .mapfig{max-width:165px;margin:0 auto}
  .jpmap{position:relative;max-width:165px;margin:0 auto}
  .jpmap img{width:100%;display:block}
  .jpmap .pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
  .jpmap .pin i{width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .jpmap .pin.tokyo i{background:#B89456}.jpmap .pin.osaka i{background:#3f5d33}
  .jpmap .pin b{font-size:.75rem;font-weight:700;margin-top:4px;background:rgba(255,255,255,.9);padding:1px 6px;border-radius:4px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .jpmap .pin.tokyo b{color:#7a5a1f}.jpmap .pin.osaka b{color:#3a5730}
  .fig .donut{width:185px;height:185px;margin:0 auto}
  .fig .donut .center b{font-size:2.1rem}
  .fig .donut-legend{justify-content:center}
  /* 簡単な図：工程フロー */
  .stepflow{display:flex;justify-content:space-between;gap:10px;position:relative;margin:8px 0 40px}
  .stepflow::before{content:"";position:absolute;top:31px;left:8%;right:8%;height:1.5px;background:var(--line-2);z-index:0}
  .sf{position:relative;z-index:1;text-align:center;flex:1}
  .sf .c{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg);color:var(--accent-d);display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 12px;font-size:.95rem}
  .sf .l{font-size:.86rem;font-weight:700}
  .sf p{font-size:.83rem;color:var(--sub);line-height:1.75;margin:8px auto 0;max-width:240px}
  @media(max-width:640px){.stepflow{flex-direction:column;gap:0}.stepflow::before{top:0;bottom:0;left:30px;right:auto;width:1.5px;height:auto}.sf{display:flex;align-items:center;gap:18px;text-align:left;padding:10px 0}.cnode{margin:0;flex:0 0 auto}.sf .l{flex:0 0 auto;white-space:nowrap}}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal,.stagger>*{opacity:1!important;transform:none!important}
    .hero-anim .ha{animation:none!important}
    header.hide{transform:none!important}
  }

/* br.bp は A-6 で全廃（max-width + text-wrap:pretty に委譲） */
/* === UD補強（視認性監査 2026-06-07） === */
footer a{display:inline-block;padding:5px 0}
header nav a{padding:14px 0}
.navcta{padding:12px 22px!important}
.backlink{padding:12px 0}

#page-works-private .sub{max-width:54em}
.form .consent{padding:9px 0}
[id^="page-legal"] p,[id^="page-legal"] li{max-width:720px}
.hero h1,.hero .lead,.hero .kicker{text-shadow:0 1px 22px rgba(8,14,7,.5)}

  /* ===== 社員インタビュー詳細 ===== */
  a.iv{cursor:pointer;color:inherit;text-decoration:none;transition:background .25s var(--ease)}
  a.iv:hover q{color:var(--accent-d)}
  .iv .more{display:inline-block;margin-top:12px;font-weight:700;font-size:.85rem;color:var(--accent-d)}
  .wrap.ivd,#page-recruit-iv-igawa .phead .wrap,#page-recruit-iv-ichikawa .phead .wrap{max-width:min(calc(58em + 2*var(--gut)),var(--maxw))}
  #page-legal-privacy .wrap,#page-legal-terms .wrap,#page-legal-compliance .wrap,#page-legal-ip .wrap{max-width:min(calc(720px + 2*var(--gut)),var(--maxw))}
  .ivd .ivhead{display:flex;gap:clamp(28px,4.5vw,56px);align-items:flex-start;margin-bottom:clamp(38px,5vw,62px)}
  .ivd .ivhead .media{width:min(480px,40vw);flex:0 0 auto}
  .ivd .ivquote{font-size:clamp(1.32rem,2.5vw,1.9rem);font-weight:700;line-height:1.55;margin:20px 0 22px;text-wrap:balance}
  .ivd .chips{display:flex;gap:10px;flex-wrap:wrap}
  .ivd .chips span{display:inline-block;border:1px solid var(--line-2);background:var(--bg-2);padding:7px 14px;font-size:.82rem;color:var(--sub)}
  .ivd .qa{max-width:58em;margin-bottom:clamp(30px,3.6vw,42px)}
  .ivd .qa h3{display:flex;gap:13px;align-items:baseline;font-size:clamp(1.04rem,1.5vw,1.18rem);margin-bottom:13px;text-wrap:balance}
  .ivd .qa h3 .qm{color:var(--accent-d);font-weight:700;flex:0 0 auto;letter-spacing:.1em}
  .ivd .qa p{margin-bottom:12px;line-height:1.95}
  .ivd .tl{margin:4px 0 0;max-width:36em;padding:0}
  .ivd .tl li{display:flex;gap:20px;padding:11px 2px;border-bottom:1px solid var(--line);list-style:none;align-items:baseline}
  .ivd .tl b{flex:0 0 58px;color:var(--accent-d);font-feature-settings:"tnum"}
  .ivd .qaimg{margin:clamp(28px,3.8vw,44px) 0;max-width:58em}
  .ivd .qaimg img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
  .ivd .ivnext{margin-top:clamp(44px,5.5vw,68px);padding-top:6px;border-top:1px solid var(--line)}
  .ivd .ivnext .kicker{margin-top:22px}
  @media(max-width:680px){.ivd .ivhead{flex-direction:column}.ivd .ivhead .media{width:100%}}
    .faq{max-width:928px}
  .faq .fq{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;
    font-weight:700;font-size:1.04rem;padding:22px 2px;min-height:44px;box-sizing:border-box}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--accent-d)}
  .faq summary:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px}
  .fqi{position:relative;flex:0 0 18px;width:18px;height:18px}
  .fqi::before,.fqi::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:var(--accent-d);transition:transform .3s var(--ease)}
  .fqi::after{transform:rotate(90deg)}
  .fq[open] .fqi::after{transform:rotate(0deg)}
  .fqa{overflow:hidden}
  .fqa p{color:var(--sub);font-size:.94rem;padding:0 28px 24px 2px;margin:0;line-height:1.9;max-width:52em}
  /* ===== 画像・イラスト挿入(①〜⑨) ===== */
  .pic{margin-bottom:16px}
  .pic svg{width:44px;height:44px;display:block}
  .bpic{margin-bottom:10px}
  .bpic svg{width:34px;height:34px;display:block;margin:0 auto}
  .cnode{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
  .cnode svg{width:30px;height:30px;display:block}
  .sf .l b{color:var(--accent-d);margin-right:8px;font-feature-settings:"tnum"}
  .signrow{display:flex;align-items:center;gap:16px;margin-top:26px}
  .savatar{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1px solid var(--line)}
  .savatar img{width:100%;height:100%;object-fit:cover;display:block}
    .mvrow{display:flex;align-items:center;justify-content:space-between;gap:clamp(30px,4vw,70px)}
  .mv-art{position:static;width:min(416px,30vw);height:auto;flex:0 0 auto;pointer-events:none}
  @media(max-width:1000px){.mv-art{display:none}}
  .amap{margin-top:22px;max-width:360px}
  .amap svg{width:100%;height:auto;display:block;border:1px solid var(--line)}
  .amap p{font-size:.78rem;color:var(--sub);margin-top:8px}
  .msgrow{display:flex;gap:clamp(30px,4vw,64px);align-items:stretch;justify-content:space-between}
  .msgtxt{display:flex;flex-direction:column}
  .msgrow>div{flex:1 1 auto;min-width:0}
  .msgphoto{flex:0 0 clamp(280px,24vw,340px);margin:0;align-self:stretch}
  .msgphoto img{width:100%;height:100%;display:block;object-fit:cover;min-height:340px}
  .msgphoto figcaption{font-size:.78rem;color:var(--sub);margin-top:8px}
  @media(max-width:1360px){.msgrow{flex-direction:column;align-items:flex-start}.msgphoto{flex:0 0 auto;width:min(420px,80vw);margin:0}}
  /* レビュー反映：実績拡充・中間CTA・SP追従・プロトメモ */
  .proto-note{background:#fff7d6;border:1px dashed #d9b94a;padding:8px 14px;font-size:.78rem;color:#6b5b1e;line-height:1.7}
  p.proto-note{margin-top:13px;max-width:46em}
  .wstats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:13px}
  .wstats>div{border-top:2px solid var(--ink-2);padding-top:20px}
  .wstats b{font-size:clamp(2.6rem,5vw,4rem);font-weight:700;color:var(--accent-d);line-height:1}
  .wstats b span{font-size:1rem;margin-left:4px;color:var(--sub);font-weight:700}
  .wstats p{font-size:.88rem;color:var(--sub);margin-top:10px}
  @media(max-width:760px){.wstats{grid-template-columns:1fr;gap:26px}}
  .wera{margin-top:clamp(24px,3vw,38px);max-width:46em}
  .werarow{display:flex;align-items:center;gap:16px;padding:9px 0}
  .werarow span{flex:0 0 9.5em;font-size:.88rem;color:var(--ink-2)}
  .werarow i{display:block;height:10px;background:var(--accent);opacity:.85;max-width:300px}
  .werarow b{font-size:.92rem;color:var(--accent-d)}
  .wtags{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .wtags span{border:1px solid var(--line-2);background:#fff;padding:8px 16px;font-size:.88rem;letter-spacing:.04em;border-radius:0}
  .waccess{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px;max-width:46em}
  .waccess input{flex:1 1 280px;border:1px solid var(--line-2);padding:13px 16px;font:inherit;font-size:.95rem;background:#fff}
  .waccess input:focus{outline:2px solid var(--accent-d);outline-offset:1px}
  .waccess .ok{flex-basis:100%;color:var(--accent-d);font-weight:700;font-size:.9rem}
  .midcta{background:var(--bg-2);border:1px solid var(--line);padding:clamp(28px,4vw,44px);text-align:center}
  .midcta p{font-weight:700;margin-bottom:18px;font-size:1.05rem}
  .spbar{display:none}
  @media(max-width:680px){
    .spbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
    .spbar .btn{width:100%;justify-content:center;display:flex}
    #page-recruit{padding-bottom:74px}
  }
  .aftnote{font-size:.82rem;color:var(--sub);margin-top:10px;line-height:1.8}
  .tblcols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,60px);align-items:start}
  .tblcols .tbl th{width:7.5em;padding-right:18px;white-space:nowrap}
  @media(max-width:920px){.tblcols{grid-template-columns:1fr}}
  .form select{width:100%;border:0;border-bottom:1px solid var(--line-2);padding:12px 2px;font:inherit;font-size:.98rem;background:transparent;color:var(--ink)}
  .form select:focus{outline:none;border-color:var(--accent-d)}
  .wstats.s4{grid-template-columns:repeat(3,1fr);margin-top:clamp(26px,3.2vw,42px)}
  @media(max-width:900px){.wstats.s4{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.wstats.s4{grid-template-columns:1fr}}
  .wsub{font-size:1rem;margin-bottom:14px}
  .wsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);margin-top:clamp(44px,5.5vw,72px);align-items:start}
  @media(max-width:880px){.wsplit{grid-template-columns:1fr;gap:40px}}
  .accesspanel{padding:clamp(36px,5vw,68px);color:#fff;border-radius:3px}
  .accesspanel .apkicker{font-size:.75rem;letter-spacing:.3em;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:18px}
  .accesspanel h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:16px}
  .accesspanel .aplead{color:rgba(255,255,255,.82);font-size:.95rem;line-height:2;margin-bottom:26px;max-width:720px}
  .accesspanel .waccess{margin-top:0;max-width:46em}
  .accesspanel .waccess input{border:0}
  .accesspanel .apdivider{height:1px;background:rgba(247,245,238,.18);max-width:46em;margin:26px 0 18px}
  .accesspanel .apsub{font-size:.85rem;font-weight:700;color:#cfdec3;margin-bottom:12px;letter-spacing:.06em}
  .accesspanel .waccess .ok.err{color:#f0b9ad}
  .accesspanel .ok{color:var(--accent)}
  .bigyears{font-size:clamp(4rem,8vw,6.4rem);font-weight:700;color:var(--accent-d);line-height:1;border-top:2px solid var(--ink-2);padding-top:24px}
  .bigyears span{font-size:1.2rem;margin-left:6px;color:var(--sub);font-weight:700}
  #page-recruit .head h2.sec{word-break:keep-all;overflow-wrap:anywhere}
  .covstate{font-size:clamp(1.5rem,2.9vw,2.3rem);font-weight:700;letter-spacing:.01em;margin:6px 0 18px;line-height:1.3}
  .covstate b{font-size:clamp(3.4rem,6.6vw,5.4rem);color:var(--accent-d);font-weight:700;line-height:1;margin-right:2px}
  .covstate .cu{margin-right:6px}
  .covlist{margin-top:clamp(34px,4.5vw,54px)}
  .covrow{display:flex;gap:clamp(20px,3vw,44px);align-items:flex-start;padding:20px 0;border-top:1px solid var(--line)}
  .covrow:last-child{border-bottom:1px solid var(--line)}
  .covlist.num .covlabel{flex-basis:3.2em;color:var(--accent-d)}
  .covlabel{flex:0 0 6.5em;font-weight:700;font-size:.92rem;padding-top:10px}
  @media(max-width:640px){.covrow{flex-direction:column;gap:10px}.covlabel,.covlist.num .covlabel{flex:0 0 auto;padding-top:0}}  /* 縦積み時はflex-basisが高さに効くため解除（SP余白バグ修正） */
  .panel{background:#fff;border:1px solid var(--line);padding:clamp(22px,3.2vw,42px) clamp(22px,3.2vw,46px)}
  .panel2{margin-top:clamp(22px,3vw,34px)}
  .panel .tbl{border-top:0}
  .panel .tbl tr:last-child th,.panel .tbl tr:last-child td{border-bottom:0}
  .panel .wtags span{background:#fff;border-color:var(--line-2)}
  .opt{font-size:.72rem;color:var(--sub);border:1px solid var(--line-2);padding:1px 7px;margin-left:6px;border-radius:2px}
  .filein{display:block;width:100%;font:inherit;font-size:.9rem;padding:10px 0;color:var(--ink)}
  .filein::file-selector-button{font:inherit;font-size:.85rem;padding:8px 16px;margin-right:12px;border:1px solid var(--accent-d);background:#fff;color:var(--accent-d);cursor:pointer;border-radius:2px}
  .filehint{display:block;font-size:.78rem;color:var(--sub);margin-top:6px}
  /* 会社情報：白ボックスをやめ、アイボリー上のスペックシートに */
  .infocard{background:transparent;border:0;border-top:2px solid var(--ink);padding:clamp(26px,3.4vw,44px) 0 0}
  .infocard .tbl{border-top:0}
  .infocard .tbl th,.infocard .tbl td{border-bottom-color:var(--line-2)}
  .infocard .tbl th{color:var(--accent-d)}
  .infocard .tbl td{color:var(--ink)}
  .infocard .cardsplit{border-top:1px solid var(--line-2);margin:clamp(28px,3.6vw,46px) 0}
  .infocard .clientsblock h3{font-size:1.06rem}
  .infocard .wtags span{background:#fff;border-color:var(--line-2)}
  /* 深緑フッター：ロゴは原色（白＋若草）のまま */

  /* ===== v2.1 「出会いに、線を引く。」磨き込み ===== */
  /* A-1: 選ばれる理由＝番号を主役にした編集組み（アイコン依存からの脱却） */
  .whys{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
  @media(max-width:860px){.whys{grid-template-columns:1fr;gap:44px}}
  .why{position:relative;padding-top:clamp(40px,4vw,58px)}
  .why .wn{position:absolute;top:0;left:-4px;font-family:"Schibsted Grotesk",var(--ui);font-size:clamp(3rem,5vw,4.2rem);font-weight:800;line-height:1;color:var(--accent);opacity:.2;letter-spacing:-.01em;user-select:none}
  .why h3{position:relative;z-index:1;font-size:1.24rem;margin-bottom:14px;letter-spacing:.01em}
  .why p{color:var(--sub);font-size:.94rem;line-height:2.05;max-width:34em}

  /* A-2: 架け橋＝1本の水平線の上の3つの結節点（ヒーロー粒子と同じダイヤ語彙） */
  .bridge2{position:relative;margin-top:clamp(44px,5.5vw,72px);display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(16px,3vw,40px)}
  .bridge2::before{content:"";position:absolute;left:3%;right:3%;top:9px;height:0;border-top:1.5px solid var(--accent-d);z-index:0}
  .bn2{position:relative;text-align:center;padding-top:46px}
  .bn2 .dia{position:absolute;left:50%;top:1px;width:16px;height:16px;transform:translate(-50%,0) rotate(45deg);background:var(--bg-2);border:1.5px solid var(--accent-d);z-index:1}
  .bn2.mic .dia{width:26px;height:26px;top:-4px;background:var(--ink);border-color:var(--ink)}
  .bn2 .bl{display:block;font-size:.75rem;letter-spacing:.22em;color:var(--faint);text-transform:uppercase;font-weight:700}
  .bn2 b{display:block;font-size:1.12rem;margin:10px 0 8px}
  .bn2.mic b{font-size:1.3rem;color:var(--ink)}
  .bn2 p{font-size:.88rem;color:var(--sub);line-height:1.9}
  .bn2.mic .dia::after{content:"";position:absolute;inset:-1.5px;border:1.5px solid var(--accent-d);opacity:0;pointer-events:none}
  .reveal.in .bn2.mic .dia::after{animation:diaPulse 1.2s var(--ease) .5s 1}
  @keyframes diaPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
  @media(max-width:760px){
    .bridge2{grid-template-columns:1fr;gap:38px}
    .bridge2::before{left:50%;right:auto;top:10px;bottom:24px;height:auto;width:0;border-top:0;border-left:1.5px solid var(--accent-d)}
  }
  @media (prefers-reduced-motion:reduce){.reveal.in .bn2.mic .dia::after{animation:none}}

  /* A-4: 線画ポートレート。頭部スケールは --z / --op で統制 */
  #page-team section.alt{background:var(--bg)}  /* メンバーの地は白（生成りにしない） */
  .member .media{background:#fff;border:1px solid #fff}  /* 外枠は白＝枠を見せない */
  .member .media>img{transform:scale(var(--z,1));transform-origin:50% var(--oy,50%)}
  .member:hover .media>img{transform:scale(calc(var(--z,1)*1.03))}

  /* A-5は取り下げ: 採用・インタビュー写真は原色のまま（2026-06-10 フィードバック） */

  /* A-3: 大見出しの折返しは設計物（PCは文節折返し、SPは自然折返し） */
  @media(min-width:700px){.mv-key{word-break:keep-all}}
  /* B-6: 見出し内英単語のアキは手動スペースでなくスペーシングで */
  .enw{margin-right:.14em}
  /* 蛍光は「出会いが成立した瞬間」だけ：お問い合わせ完了のマーカー */
  .ok .hl-mk{font-style:normal;background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 94%,transparent 94%)}

  /* ===== SPタイポ&余白 再調整（2026-06-12 施主FB「文字が大きい・余白が少ない」対応）===== */
  /* デスクトップ不変。560px以下のみ：本文15px / lead16px / h2 26px / ページh1 31px / kicker 11px */
  @media(max-width:560px){
    /* --- タイポスケール --- */
    body{font-size:15px;line-height:1.92}
    .lead{font-size:1rem;line-height:2.05}
    .msg{font-size:.97rem;line-height:2.15}
    .kicker{font-size:.7rem;letter-spacing:.24em;gap:11px}
    .kicker[data-no=""]::before{width:22px}
    .sec-en,.phead .en-s{font-size:.75rem}
    .crumb{font-size:.8rem;margin-bottom:20px}
    .phead h1{font-size:1.94rem;line-height:1.34}
    h2.sec{font-size:1.625rem;line-height:1.5}
    .mv-key{font-size:2.06rem;line-height:1.42}
    .mv-sub{font-size:.72rem}
    .mv-text{font-size:1rem;line-height:2.05}
    .ivd .ivquote{font-size:1.26rem;line-height:1.6}
    .row h3{font-size:1.13rem}
    .point h3,.why h3{font-size:1.15rem}
    .pw h3{font-size:1.15rem}
    .bn2.mic b{font-size:1.2rem}
    .navindex a .nm{font-size:1.1rem}
    .faq summary{font-size:1rem}
    .wstats b{font-size:2.3rem}
    .fbig{font-size:2.3rem;margin-bottom:40px}
    /* --- 余白（呼吸） --- */
    section,section.alt{padding:84px 0}
    .phead{padding:64px 0 0}
    .head{margin-bottom:48px}
    .head .kicker{margin-bottom:18px}
    .g3,.g4{gap:34px}
    .whys{gap:48px}
    .pw{padding:28px 0}
    .navindex a{padding:24px 4px 24px 12px}
    .wstats{gap:30px}
    .form{gap:30px}
    .ivd .qa{margin-bottom:18px}
    footer{padding:44px 0 22px}
    /* 既存不具合: .field input{width:100%} がseg内radioに効き文字を右へ押し出す */
    .seg input{width:auto;flex:0 0 auto}
  }
  


/* KV: 色が増える（ずらし弱） 2026-08-04
   白地。深緑・若草・蛍光の円が掛け合わせ(multiply)で重なり、
   重なったところに元の三色には無い色が生まれる。約2.6秒で完全静止。
   見出しの奥には刷りズレの層を二枚、うっすら重ねてある。 */
#kvhero{position:relative;overflow:hidden;display:block;padding:0;min-height:88vh;min-height:88svh;
 background:#ffffff;color:var(--ink)}
#kvhero h1,#kvhero .lead,#kvhero .kicker{text-shadow:none}
#kvhero .hero-copy{position:absolute;z-index:5;left:clamp(20px,7vw,104px);top:50%;transform:translateY(-50%);max-width:min(560px,88vw)}
#kvhero .kicker{position:relative;color:#2f7d4a;font-family:"Schibsted Grotesk","Noto Sans JP",sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.34em;padding-left:48px}
#kvhero .kicker::before{content:"";position:absolute;left:0;top:.55em;width:36px;height:1px;background:#2f7d4a}
#kvhero .kv-display{position:relative;font-family:"Schibsted Grotesk","Noto Sans JP",system-ui,sans-serif;font-weight:800;font-size:clamp(2.45rem,6.8vw,5.2rem);line-height:1.04;letter-spacing:-.028em;margin:16px 0 0;color:var(--ink)}
#kvhero .kv-display .nb{white-space:nowrap;color:#2f7d4a}
#kvhero .kv-sub{margin-top:20px;color:rgba(28,44,29,.9);font-weight:400;letter-spacing:.01em;font-size:clamp(.93rem,1.25vw,1.06rem);line-height:2}
#kvhero .kv-actions{margin-top:32px}
#kvhero .btn{color:var(--ink);border:1px solid rgba(28,44,29,.6);background:rgba(255,255,255,.55)}
#kvhero .btn:hover{background:var(--ink);color:#f7f5ee;border-color:var(--ink)}
#kvhero .btn.solid{background:var(--ink);border-color:var(--ink);color:#f7f5ee}
#kvhero .btn.solid:hover{background:#2f7d4a;border-color:#2f7d4a;color:#fff}

/* ---- 刷りズレ（弱）----
   擬似要素で描くので、実際の文字は増えない＝読み上げにも検索にも二重に出ない。
   奥ほど薄く、ずれも小さく。ここを濃くすると版ズレの事故に見える。 */
#kvhero .kv-display::before,#kvhero .kv-display::after{
  content:"Brand Meets Possibility.";position:absolute;left:0;top:0;width:100%;
  z-index:-1;pointer-events:none;-webkit-user-select:none;user-select:none}
#kvhero .kv-display::after{color:#e9f02a;opacity:.24;transform:translate(8px,5px) rotate(-.3deg)}
#kvhero .kv-display::before{color:#96BA7D;opacity:.14;transform:translate(17px,10px) rotate(-.7deg)}
#kvhero.kv-in .kv-display::after{animation:kvEc1 1s var(--ease) backwards;animation-delay:.50s}
#kvhero.kv-in .kv-display::before{animation:kvEc2 1s var(--ease) backwards;animation-delay:.42s}
@keyframes kvEc1{from{transform:translate(40px,22px) rotate(-.3deg)}}
@keyframes kvEc2{from{transform:translate(52px,28px) rotate(-.7deg)}}

/* ---- 色の円 ----
   isolation:isolate が要る。これが無いと掛け合わせがページの地まで抜けていく。 */
#kvhero .stage{position:absolute;z-index:1;inset:0}
#kvhero .stage svg{width:100%;height:100%;display:block}
#kvhero #kvfield{isolation:isolate}
#kvhero .blob{mix-blend-mode:multiply;opacity:0;
 transform-box:fill-box;transform-origin:center;transform:scale(.3)}

/* entrance — KVMIC.replay() が .kv-in を付け直すたびに再生（SPAでトップへ戻るたびリセット） */
#kvhero .hero-copy>*{opacity:0}
#kvhero.kv-in .hero-copy>*{opacity:1;animation:kvRise .9s var(--ease) backwards}
#kvhero.kv-in .hero-copy>*:nth-child(1){animation-delay:.4s}
#kvhero.kv-in .hero-copy>*:nth-child(2){animation-delay:.55s}
#kvhero.kv-in .hero-copy>*:nth-child(3){animation-delay:.7s}
#kvhero.kv-in .hero-copy>*:nth-child(4){animation-delay:1.1s}
@keyframes kvRise{from{opacity:0;transform:translateY(22px)}}
@media(max-width:720px){
  #kvhero .hero-copy{left:20px;right:20px;top:clamp(56px,9vh,120px);transform:none;max-width:none}
  #kvhero .kv-display{font-size:clamp(2.2rem,9vw,3.05rem)}
  #kvhero .kicker{font-size:.64rem;letter-spacing:.22em;white-space:nowrap;padding-left:0}
  #kvhero .kicker::before{display:none}
  #kvhero .kv-sub{font-size:.9rem;line-height:1.95}
  #kvhero .stage{left:0;right:0;top:52vh;bottom:0}
  /* 小さい画面ではずれ幅も詰める。PCと同じ値だと文字が潰れて読めなくなる */
  #kvhero .kv-display::after{transform:translate(4px,3px) rotate(-.3deg)}
  #kvhero .kv-display::before{transform:translate(8px,5px) rotate(-.7deg)}
  #kvhero.kv-in .kv-display::after{animation-name:kvEc1s}
  #kvhero.kv-in .kv-display::before{animation-name:kvEc2s}
  @keyframes kvEc1s{from{transform:translate(20px,11px) rotate(-.3deg)}}
  @keyframes kvEc2s{from{transform:translate(26px,14px) rotate(-.7deg)}}
}
@media(prefers-reduced-motion:reduce){
  #kvhero .hero-copy>*{opacity:1;animation:none!important}
  #kvhero .kv-display::before,#kvhero .kv-display::after{animation:none!important}
}



/* ===================================================================
   260731 市村さん・玉野さんレビュー反映
   =================================================================== */

/* Q1 : PC / SP それぞれで改行位置を明示指定するためのユーティリティ
   br.pc  → PC幅（761px以上）でのみ改行
   br.sp  → SP幅（760px以下）でのみ改行
   <br>   → PC・SP共通の改行
   ここはクライアント指定44箇所（bio以外で br.sp 32 / br.pc 15）が乗っているので
   従来どおり 760px で切り替える。                                        */
br.pc{display:inline}
br.sp{display:none}
@media(max-width:760px){ br.pc{display:none} br.sp{display:inline} }

/* ── 260731 追記：メンバーコメントだけ、固定改行を効かせる帯を変える ──
   .bio のカラム幅は画面幅で大きく動く（実測）:
       〜540px   1カラム    272〜492px
     541〜860px  2カラム    243〜382px
     861px〜     3〜4カラム 183〜272px
   bioの固定改行は PC=265px / SP=336px を前提に計算しているので、
   噛み合うのは 861px以上（3〜4カラム）の帯だけ。
   それ未満では行が早く終わって右が大きく余っていた（充填率45〜69%）。
   860px以下は固定改行をやめ、.nb（文節の途中で折り返さない保護）と
   text-wrap:pretty に任せて幅なりに流す（充填率78〜87%に改善）。
   861px以上の見え方は従来と完全に同じ。
   ★ここはメンバーコメント限定。上のクライアント指定44箇所には影響しない。 */
.member .bio br.sp{display:none}
@media(max-width:860px){ .member .bio br.pc{display:none} }

/* 表紙：キッカーの横線の長さを統一（先頭の罫線と文中の罫線を同寸に） */
#kvhero .kicker{--krule:36px}
#kvhero .kicker::before{width:var(--krule)}
#kvhero .kicker .krule{display:inline-block;width:var(--krule);height:1px;background:#2f7d4a;
  vertical-align:middle;margin:0 .30em 0 .04em}
@media(max-width:720px){ #kvhero .kicker{--krule:24px} }

/* ＜数字で見るMIC＞：キャプションを下の数字のセンターに正確に合わせる
   （letter-spacing の末尾アキ分だけ左にずれるのを相殺）                */
.fig-h{padding-left:.18em}
.fig .fig-h,.fig .bignum,.fig .fig-c{text-align:center}
/* 数字は「単位」ではなく「数字そのもの」を列の中央に置く（単位は右へはみ出させる）
   → キャプション（創業／取引ブランド／取引事務所）と数字のセンターが正確に一致する */
.fig .bignum{display:flex;justify-content:center;align-items:baseline}
.fig .bignum>span{width:0;overflow:visible;white-space:nowrap}
/* 会社概要は円グラフ削除で2項目 → 中央寄せの2カラムに */
.figgrid-2{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
@media(max-width:760px){ .figgrid-2{grid-template-columns:1fr} }

/* 事業内容：架け橋の中央（MIC）の箱を濃く・大きく */
.bridge{grid-template-columns:1fr auto 1.42fr auto 1fr;align-items:center}
.bnode.mic{background:var(--accent-d);border-color:var(--accent-d);color:#fff;
  padding:34px 28px;box-shadow:0 18px 44px rgba(47,125,74,.30);transform:scale(1.04)}
.bnode.mic .bl{color:rgba(255,255,255,.85)}
.bnode.mic b{color:#fff;font-size:1.52rem}
.bnode.mic p{color:rgba(255,255,255,.92)}
.bnode.mic .bpic svg path[fill="#4f7340"]{fill:#ffffff}
.bnode.mic .bpic svg path[fill="#96BA7D"]{fill:#cfe3bd}
@media(max-width:760px){
  .bridge{grid-template-columns:1fr}
  .bnode.mic{transform:none;padding:28px 22px}
}

/* 実績：閲覧申請パネル — 白い箱どうし／緑の箱どうしの幅を2フォームで統一 */
.accesspanel .waccess{display:grid;grid-template-columns:minmax(0,1fr) 15.5em;gap:14px;align-items:stretch}
.accesspanel .waccess input{width:100%;flex:none;min-width:0}
.accesspanel .waccess .btn{width:100%;justify-content:center;text-align:center;white-space:nowrap}
.accesspanel .waccess .ok{grid-column:1 / -1;margin:0}
@media(max-width:640px){ .accesspanel .waccess{grid-template-columns:1fr} }

/* 会社概要：主要取引先は箱を外してテキストのみ（Q7=B） */
.clientlist{display:flex;flex-wrap:wrap;gap:2px 28px;margin-top:20px;line-height:2.2}
.clientlist span{font-size:.92rem;color:var(--ink-2);letter-spacing:.02em;white-space:nowrap}
@media(max-width:560px){ .clientlist{gap:0 20px} .clientlist span{font-size:.86rem} }
/* 320px級の端末では最長の社名（実測298px）が1行に収まらず、
   ページ全体に2pxの横スクロールが出ていた。この幅では実質1社1行なので、
   収まらない社名だけ折り返させる（360px以上では全社1行に収まり見た目は不変）。*/
@media(max-width:400px){ .clientlist span{white-space:normal} }

/* お問い合わせ：種別ボタンの外枠サイズを同等に／未選択=白地+緑枠、選択=緑ベタ（Q13） */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.seg label{position:relative;background:#fff;border:1.5px solid var(--accent-d);color:var(--accent-dd);
  justify-content:center;text-align:center;padding:14px 10px;white-space:normal;line-height:1.45;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.seg label input[type=radio]{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.seg label:hover{background:var(--accent-soft)}
.seg label:has(input:checked){background:var(--accent-d);border-color:var(--accent-d);color:#fff}
.seg label:has(input:focus-visible){outline:2px solid var(--accent-dd);outline-offset:2px}
@media(max-width:560px){
  .seg{grid-template-columns:1fr}
  .seg label{padding:13px 10px}
  .seg label input[type=radio]{width:1px;flex:none}
}



/* ── 260805 メンバー：全員を「イラスト左・テキスト右」に ──
   もとは4カラムの縦型カードで、紹介文の行数（5〜13行）がそのままカードの高さの差になり、
   とくに顧問（1人だけ）は13行・カード775pxまで伸びて右に3カラムぶんの空きが残っていた。
   横型にするとカードの高さがイラストの高さで決まるので、紹介文が何行でも高さが揃う。

   .g4 はサイト全体で使う汎用クラスなので、必ず #page-team に閉じ込めること。
   ここを外すと事業内容や実績のグリッドまで巻き添えで崩れる。

   イラスト幅は200px固定。fr で割ると画面幅ごとに大きさが変わって、
   人によって顔の大きさが違うように見えてしまう。
   220→200pxにしたのは本文を20px広げるため。180px以下まで詰めると、
   長い紹介文が絵より縦に長くなって、カードの高さがまた不揃いになる（実測240/268px）。
   2カラムに並べるのは1120px以上だけ。それ未満で2カラムにすると
   本文が1行17字ほどまで痩せて、かえって行数が増える（実測で顧問が13行に戻った）。

   bioの固定改行（br.pc）は「1カラム＝約265px」を前提に計算されている。
   横型では本文幅が変わるので、860px以下で止めているのと同じ理由でここでも止め、
   幅なりに流す。文章は一字も変えていない。 */
@media(min-width:1120px){
  #page-team .g4{grid-template-columns:1fr 1fr}
}
@media(min-width:541px) and (max-width:1119px){
  #page-team .g4{grid-template-columns:1fr}
}
@media(min-width:541px){
  #page-team .g4>.member{
    display:grid;grid-template-columns:minmax(0,200px) 1fr;
    column-gap:clamp(18px,2vw,30px);align-items:start}
  #page-team .g4>.member>*{grid-column:2}
  #page-team .g4>.member .media{
    grid-column:1;grid-row:1/span 99;margin-bottom:0;align-self:start}
  #page-team .g4>.member h4{margin-top:0}
  /* 1カラム表示のときに本文が横に伸びすぎないように。1行45字を超えると読みにくい */
  #page-team .g4>.member .bio{max-width:40em}
  #page-team .g4>.member .bio br.pc{display:none}

  /* ── 肩書きを1行で読ませる ──
     「デジタルメディア事業 執行役員ビジネスマーケティング本部長」は実測431px要る。
     途中で折り返さないよう1つのまとまり(.ttl)にしてあるが、
     幅が足りない画面でnowrapのままにすると横にはみ出すので、
     入る幅（760px超）でだけ効かせる。760px以下は普通に折り返す。
     ※文字もbrも増減させていない。spanのまとめ方を変えただけ。 */
  #page-team .g4>.member .bio .ttl{white-space:normal}
}
@media(min-width:761px){
  #page-team .g4>.member .bio .ttl{white-space:nowrap}
}
/* 顧問は1人だけ。2列のときに1列ぶん（本文338px）では肩書きが1行に入らないので、
   2列ぶんを使う。イラストとテキストの組み方は他の人とまったく同じ。
   将来ここに2人目が入れば、この指定は自動的に効かなくなる。 */
@media(min-width:1120px){
  #page-team .g4>.member:only-child{grid-column:span 2}
}
/* ── 顧問の紹介文だけ、指定の行構成で出す（2026-08-05 クライアント指定）──
   1行目 博報堂で営業・インタラクティブマーケティング・事業開発を担当。       449px
   2行目 大手レコード会社のデジタルビジネス開発、medibaの広告商品開発・運用、  524px
   3行目 アマゾン広告事業のセールスマネージャーを経て、2019年アドビ入社。     484px
   4行目 デジタルメディア事業 執行役員…スペシャリスト。                     923px（自然に折り返して2行）
   いちばん長い2行目が524px要るので、本文がそれを下回る画面では
   指定どおりに出しても途中で折り返って意味がなくなる。効かせるのは861px以上だけ。
   ※ brは1つも増やしていない。既にあった br.pc に印(bline)を付けただけ。
   ※ クラス名 bp は過去に全廃した別物なので使わないこと。 */
@media(min-width:861px){
  #page-team .g4>.member .bio br.bline{display:inline}
}



/* 表紙サブコピー：ご指定の2行がそのまま2行で収まるように */
#kvhero .hero-copy{max-width:min(620px,88vw)}
#kvhero .kv-sub{letter-spacing:0;font-size:clamp(.9rem,1.2vw,1.02rem)}
/* 英字h1の行組は従来どおり（Brand / Meets / Possibility. の3行）を維持 */
#kvhero .kv-display{max-width:560px}
@media(max-width:720px){#kvhero .hero-copy,#kvhero .kv-display{max-width:none}}



/* ===================================================================
   260731 中央バランス調整
   =================================================================== */

/* 1) ＜数字で見るMIC＞ ─ 数字と単位のバランス
   ・元の状態：「300事務所+」全体が中央 → 大きい数字「300」が最大33px左にズレて見える
   ・前回の修正：数字だけを中央 → 今度は単位「事務所+」が右に飛び出して見える
   → 両者の中間（光学的中央）に置く。JS側で単位幅の1/4だけ右へ寄せる。
     JSが動かない場合は「全体が中央」＝元の状態にフォールバックする。          */
.fig .bignum{display:flex;justify-content:center;align-items:baseline}
.fig .bignum>span{width:auto;overflow:visible;white-space:nowrap}
/* letter-spacing の過補正を解除（実測でズレていなかったため） */
.fig-h{padding-left:0}

/* 2) 中央寄せのキッカーは罫線を左右対称にして、文字を軸に乗せる
   （左だけに罫線があると、文字が軸から約20px右にズレて見えるため）        */
.kicker.kicker-c{justify-content:center}
.kicker.kicker-c[data-no=""]::after{content:"";display:inline-block;
  width:26px;height:1.5px;background:var(--accent);vertical-align:middle}
@media(max-width:560px){ .kicker.kicker-c[data-no=""]::after{width:22px} }

/* 3) 会社概要の2項目グリッド ─ 拠点マップ側が細いので、視覚的な重心を合わせる */
/* 拠点マップ側の中身が細く、2項目の重心が左に寄って見えていたので、
   マップと説明文の見た目の幅を揃える                                       */
.figgrid-2{grid-template-columns:repeat(2,minmax(0,260px));gap:clamp(40px,6vw,88px)}
.figgrid-2 .mapfig,.figgrid-2 .jpmap{max-width:200px}
.figgrid-2 .fig-c{max-width:200px;margin-left:auto;margin-right:auto}
@media(max-width:760px){ .figgrid-2{grid-template-columns:1fr} }



/* ===================================================================
   260731 縦の余白をスリムに（横組み・文字サイズ・行組は変更しない）
   セクション余白 −35% / 見出し下 −34% / 行送り −7〜9%
   =================================================================== */

/* --- セクションの上下余白（いちばん効く） --- */
/* ブロックの切り替え（背景が変わる線）から見出しまでを詰める。
   上を薄く・下を厚くすることで、見出しが「次のブロックのもの」として読める */
section,section.alt{padding:clamp(30px,3.6vw,52px) 0 clamp(44px,5.2vw,76px)}
.phead{padding:clamp(28px,3.4vw,48px) 0 0}

/* --- 見出しブロックまわり --- */
.head{margin-bottom:clamp(22px,2.8vw,36px)}
.head .kicker{margin-bottom:15px}

/* --- グリッドの行間 --- */
.g3{gap:clamp(18px,2.2vw,32px)}
.g4{gap:clamp(16px,1.9vw,26px)}
.figgrid{gap:clamp(20px,3vw,38px)}
.whys{gap:clamp(22px,3vw,38px)}
.wstats{gap:clamp(18px,2.4vw,32px);margin-top:24px}
.powers .pw{padding:18px 0}
.covrow{padding:15px 0}
.stepflow{margin:8px 0 26px}
.form{gap:20px}
.msg+.msg{margin-top:14px}
.member .media{margin-bottom:14px}
.ivd .qa{margin-bottom:clamp(22px,2.6vw,30px)}
.faq summary{padding:20px 0}
.fqa p{padding-bottom:18px}
footer{padding:clamp(38px,4.4vw,56px) 0 18px}

/* --- 大きすぎる写真の縦を抑える（トリミングは中央基準） --- */
.ivd .qaimg{margin:clamp(18px,2.2vw,28px) 0}
.ivd .qaimg img{max-height:440px;object-fit:cover;width:100%}
.msgphoto img{max-height:520px;object-fit:cover;width:100%}
.ivhead .media.ar-3x2{max-height:300px}
.ivhead .media.ar-3x2 img{height:100%;object-fit:cover}

/* --- 行送り（1行ずつの高さ）を少しだけ詰める --- */
body{line-height:1.85}
.lead{line-height:1.95}
.msg{line-height:2.02}
.mv-text{line-height:2.02}
.member .bio{line-height:1.8}
/* --- 改行位置の保護：文節の途中（特にカタカナ語）で折り返さない --- */
.member .bio .nb{white-space:nowrap}
.fig-c{line-height:1.7}
.faq .fqa p{line-height:1.8}
.ivd .qa p{line-height:1.9}
.tbl th,.tbl td{line-height:1.8}

/* --- 実績まとめページ「閲覧申請」パネル：中央寄せ（260731 案A） ---
   パネルの内容領域は最大1024pxまで広がるのに対し、フォームは736pxで終わるため
   右にだけ288px余って左寄りに見えていた。内容を本文幅トークンと同じ720pxに
   まとめて中央に置き、左右の余りを152pxずつに揃える。
   内容領域が720pxを超えるのは画面幅900pxから（実測）。それ未満では余白が
   そもそも無く、中央寄せにすると短い行が中央に浮いて読みにくいので当てない。
   2つのフォーム（メールアドレス／閲覧コード）が入力欄・ボタンとも同寸である
   性質は維持する。                                                      */
@media(min-width:900px){
  .accesspanel{text-align:center}
  .accesspanel .apkicker,.accesspanel h2,.accesspanel .aplead,.accesspanel .apsub,
  .accesspanel .waccess,.accesspanel .apdivider{
    max-width:720px;margin-left:auto;margin-right:auto}
  .accesspanel .waccess input{text-align:left}   /* 入力文字は左から */
  .accesspanel .waccess .ok{text-align:center}   /* 完了メッセージは中央 */
}

/* --- タッチ端末での入力まわり（260731 SP版レビュー） ---
   iOS Safari は font-size が16px未満の入力欄にフォーカスすると画面を自動で拡大し、
   ユーザーが指で縮小し直すまで戻らない。
   お問い合わせの大半の欄（お名前・会社名・電話・メール・本文）は16pxで対策済みだったが、
     ・閲覧申請パネルの2欄        .95rem = 15.2px
     ・お問い合わせ「ご希望時期」  .98rem = 15.68px
   だけが取り残されていたので揃える。

   同意チェックボックスは13×13px。ラベル文字をタップしても切り替わる（ラベルは44px確保
   されている）が、四角を狙うと外しやすいので指で押せる大きさに上げる。

   hover:none ＝ホバーできない端末＝スマホ・タブレットに限定。
   マウス環境（PC）の見た目は1pxも変わらない。                                */
@media(hover:none){
  .waccess input,
  .accesspanel .waccess input,
  .form select,
  .form textarea,
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"]{font-size:16px}
  .form .consent input{width:18px;height:18px}

  /* タップ領域の確保（260807）
     見た目・行組・下線の位置は変えず、触れる範囲だけ44pxにする。
     要素の箱を大きくすると下線が離れたり行が動くため、擬似要素を重ねている。 */
  .backlink,
  .cinfo dd a{position:relative}
  .backlink::after,
  .cinfo dd a::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
}

/* --- 実績（限定公開）のサムネ間 --- */
#page-works-private .wkgrid{gap:22px 22px;margin:14px 0 34px}

/* --- スマホ（560px以下）--- */
@media(max-width:560px){
  body{line-height:1.82}
  section,section.alt{padding:34px 0 48px}
  .phead{padding:30px 0 0}
  .head{margin-bottom:28px}
  .head .kicker{margin-bottom:13px}
  .g3,.g4{gap:26px}
  .whys{gap:32px}
  .powers .pw{padding:20px 0}
  .navindex a{padding:18px 4px 18px 12px}
  .wstats{gap:22px}
  .form{gap:22px}
  .ivd .qa{margin-bottom:26px}
  .lead{line-height:1.92}
  .msg{line-height:2.0}
  .mv-text{line-height:1.92}
  footer{padding:34px 0 18px}
}



/* ===== 260805 SP改修（すべてSP系メディアクエリ内。PC 1280/1440 には効かない） ===== */
@media(max-width:760px){
  /* SPだけ塊化するユーティリティ（PCは通常のインライン＝影響ゼロ） */
  .nbs{display:inline-block}
  /* セクションラベルの下限を12pxに（視認性。設計のスケールはPC側で維持） */
  .kicker{font-size:12px}
  #kvhero .kicker{font-size:12px;letter-spacing:.14em}
  .mv-sub{font-size:13px}
  /* リーガル4ページの本文は行送りを締める（長文の間延び対策） */
  #page-legal-privacy p,#page-legal-privacy li,
  #page-legal-terms p,#page-legal-terms li,
  #page-legal-compliance p,#page-legal-compliance li,
  #page-legal-ip p,#page-legal-ip li{line-height:1.9}
  /* インタビューカードの「読む」リンクを独立行に（肩書きとの連結読み防止） */
  .more{display:block;margin-top:8px}
  /* 同意行：チェックボックスを1行目に揃える */
  .form .consent{align-items:flex-start}
  .form .consent input{margin-top:3px}
  /* メンバー紹介文は塊単位の折返しを最適化 */
  #page-team .bio{text-wrap:pretty}
  /* teamのキッカーは flex アイテム間で折り返す（キャスティングディレクターの語中折れ対策） */
  #page-team .kicker{flex-wrap:wrap;row-gap:6px}
}
@media(min-width:761px){
  /* PCではキッカー内の塊化を無効にして、従来どおりの1本のテキストに戻す（PC不変の担保） */
  .kicker .nb{display:contents}
}
@media(max-width:680px){
  /* 採用ページの追従CTAバーの高さぶん、最下部に余白（最後のコンテンツが隠れない）。
     余白帯はENTRYセクションと同じ生成りにして白帯に見えないようにする */
  #page-recruit{padding-bottom:calc(72px + env(safe-area-inset-bottom));background:#f7f5ee}
}
@media(max-width:540px){
  /* 5つのフェーズ：アイコン右の全幅をテキストに（170px幅に押し込まない） */
  .stepflow .sf{display:grid;grid-template-columns:48px 1fr;column-gap:18px;align-items:center}
  .stepflow .sf .cnode{grid-row:1/3}
  .stepflow .sf .l{align-self:end}
  .stepflow .sf p{grid-column:2;margin:2px 0 0;max-width:none;align-self:start}
}
@media(max-width:480px){
  /* フッターは1カラム積み（住所・リンクの泣き別れの根本対策） */
  footer .fgrid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:400px){
  /* 取引先の社名は社名単位で折り返す */
  .clientlist span{display:inline-block;white-space:normal}
}
@media(max-width:360px){
  /* 大見出しを1段階縮小（320px帯の語中折れ対策） */
  h2.sec{font-size:1.4rem}
  /* 閲覧申請パネル：本文列を確保（320pxで200px→232px） */
  .accesspanel{padding-left:20px;padding-right:20px}
  /* 法務ハブ：和文ラベルを1行目に、英字ラベルは2行目へ */
  .navindex a{flex-wrap:wrap}
  .navindex a .nm{flex:1 0 100%}
  /* 表紙ラベルの右端詰まり対策 */
  #kvhero .kicker{letter-spacing:.07em;--krule:14px}
}
@media(hover:none){
  /* 同意チェックボックスを拡大（タップ精度）。ラベル全体もタップ可 */
  .form .consent input{width:22px;height:22px}
  .form .consent{padding:12px 0}
  /* プレースホルダーだけ縮小（入力値は16pxのままなのでiOSズームは起きない） */
  .waccess input::placeholder{font-size:13px}
}


/* ═══════════════════════════════════════════════════════════════
   §22 SP行組 — 文節単位でのみ折り返す（260812）
   ───────────────────────────────────────────────────────────────
   本文のテキストに、文節の切れ目だけ「改行してよい印」（wbr class="wb"）を
   打ってある。SP幅では keep-all でそれ以外の位置での改行を止めるので、
   「最終更｜新」「関す｜る法律」「見つ｜け出します」のような
   語の途中での改行が起きなくなる。
   1文節が1行に収まらないときだけ anywhere が働くので、はみ出しは出ない。
   （anywhere は「他に折り返せる場所が無いとき」だけ効く最後の逃げ道。
     break-word だと flex の中で最小幅が縮まず、320px でだけ
     「17:00 タレント事務所にて…」の行がはみ出したため anywhere にしている。）
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  body{word-break:keep-all;overflow-wrap:anywhere}
  /* 入力欄・数字まわりは従来どおり（keep-allの副作用を避ける） */
  input,textarea,select,button,.bignum,.pn,.tel{word-break:normal}
}
/* PC幅では今回足した wbr.wb を箱ツリーから外す。
   改行の候補が1つも増えないので、確定済みのPC行組は1pxも動かない。
   ※元からある素の wbr 3箇所はPCの行組を担っているため、触らない。 */
@media(min-width:761px){ wbr.wb{display:none} }

/* ═══════════════════════════════════════════════════════════════
   §23 SP見出しの手当て — 自動の折り返しだけでは収まらなかった箇所
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* §23-1 見出しの text-wrap:balance をSPでは解除する。
     文節単位でしか折れない状態で balance をかけると
     「実績まと｜めページの閲覧申請」のように1行目が痩せる。
     素直に詰めたほうが行頭・行末とも収まりが良い。 */
  h1,h2,h3,h4{text-wrap:wrap}
  /* §23-2 ビジョンの大見出し（Our Vision＝section.alt の側だけ）。
     33pxのままだと「リーディングカンパニー」が1行に入らず
     「カンパニ｜ー」と割れて行頭が長音になっていた。
     1文節が1行に収まるところまで詰める。
     ※ミッション側の「Brand Meets Possibility.」は対象外（従来のまま）。 */
  .alt .mv-key{font-size:clamp(1.5rem,6.9vw,2.06rem);line-height:1.4}
  /* SPでは .nb をふつうのインラインに戻し、改行位置を wbr.wb だけで決める。
     → 「リーディングカンパニー／であり続ける」
       （従来は「…カンパニーで／あり続ける」で助動詞が割れていた）
     PC幅では inline-block のままなので、PCの行組は不変。 */
  .alt .mv-key .nb{display:inline;white-space:normal}
}
@media(max-width:560px){
  /* §23-3 法務ハブのカード。「プライバシーポリ｜シー」「コンプライアン｜ス」と
     和文ラベルが2行に割れていた（360px以下は英字を2行目に落とす手当て済み）。
     375/390pxでは英字ラベルを少し詰めるだけで和文が1行に収まるので、
     カードの高さを変えずに解消する。 */
  .navindex a{gap:8px}
  .navindex a .en{font-size:.75rem;letter-spacing:.06em;margin-right:8px}  /* 12px。11pxまでは下げない */
}
/* §23-4 は撤回。表のセルの .nb を一律インラインにすると
   「創立 1977年4月21日 ／ 設立／2002年12月2日」と日付が離れてしまうため、
   会社概要の「事業内容」だけを下の HAND（.nbのまとめ直し）で直している。 */

/* ═══════════════════════════════════════════════════════════════
   §26 SPの行の区切りをご指定どおりにする（260812）
   ───────────────────────────────────────────────────────────────
   顧問（竹嶋さん）の紹介文は、クライアントご指定の行構成（260805）が
   すでに br.bline として入っているが、861px以上でしか効いていなかった。
   ご指定の2行目は524px要るのに対しSPの本文幅は327px（375px時）しかなく、
   そのまま出しても行の途中で折り返るため、当時は見送られている。
   今回のご指示は「その区切りをSPでも使う」なので、
   ・ご指定の区切りでは必ず改行する（＝区切りが行頭に来る）
   ・区切りの中は、幅なりに文節単位で折り返す
   という形にする。区切りの中で1回折り返る行は出るが、
   文の切れ目が行頭に揃うので、意味のまとまりは読み取れる。
   ※ br は1つも増やしていない。既にある br に印を付けただけ。
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  #page-team .g4>.member .bio br.bline,
  #page-team .g4>.member .bio br.sline{display:inline}
}

/* ═══════════════════════════════════════════════════════════════
   §27 旧iPhone SE（320px）の手当て（260812）
   いま出回っている中でいちばん狭い320pxでは、文節ひとつが1行に
   入りきらない箇所が残る。文字を変えずに収まる大きさへ詰める。
   361px以上には効かないので、375/390pxの行組は変わらない。
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:360px){
  /* インタビュー導線の引用。写真が左にあるぶん本文が150pxしかなく、
     「タレント事務所との」（17.6pxで158px）が1行に入らずに
     「タレント事務所と／の架け橋。」と助詞が行頭へ落ちていた。
     16pxまで詰めると144pxになり、1行に収まる。 */
  .iv q{font-size:1rem}
}


/* ═══════════════════════════════════════════════════════════════
   §24 アクセスマップ（260812）
   簡略図（ダミー）をやめ、Googleマップの埋め込みに差し替えた。
   東京本社／大阪支社の切り替えは、ラジオボタンとCSSだけで動く（JSなし）。
   地図が読み込めない環境でも、住所と「Googleマップで開く」は必ず読める。
   ═══════════════════════════════════════════════════════════════ */
.amap-r{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none;
  font-size:16px}  /* 見えないが input なので、iOSズーム判定に引っかからない大きさにしておく */
.amap-tabs{display:flex;gap:6px;margin-bottom:10px}
.amap-tabs label{display:inline-flex;align-items:center;min-height:44px;padding:7px 15px;
  font-size:.78rem;font-weight:700;color:var(--sub);cursor:pointer;
  border:1px solid var(--line);border-radius:3px;
  transition:background .22s var(--ease),color .22s,border-color .22s}
.amap-tabs label:hover{border-color:var(--accent-d);color:var(--accent-d)}
#amap-tokyo:checked~.amap-tabs label[for="amap-tokyo"],
#amap-osaka:checked~.amap-tabs label[for="amap-osaka"]{
  background:var(--accent-d);border-color:var(--accent-d);color:#fff}
#amap-tokyo:focus-visible~.amap-tabs label[for="amap-tokyo"],
#amap-osaka:focus-visible~.amap-tabs label[for="amap-osaka"]{
  outline:2px solid var(--accent-d);outline-offset:2px}
.amap-pane{display:none}
#amap-tokyo:checked~.pane-tokyo,#amap-osaka:checked~.pane-osaka{display:block}
.amap iframe{display:block;width:100%;aspect-ratio:360/230;border:1px solid var(--line);
  background:var(--bg-2)}
.amaplink{color:var(--accent-d);font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){ .amap iframe{aspect-ratio:4/3} }


/* ═══════════════════════════════════════════════════════════════
   §25 TOP表紙のイラスト（260812）
   SPで円が上下に切られ、イラストに見えなくなっていた。
   切り取り枠は main.js の setVB() が描画領域の縦横比に合わせて作る。
   ここでは、円が小さくなりすぎないように描画領域を少し上へ広げている。
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:720px){
  #kvhero .stage{top:42vh}
}

/* ═══════════════════════════════════════════════════════════════
   §25-2 TOP表紙：文字とイラストの重なり（260812）
   ───────────────────────────────────────────────────────────────
   721〜900px（タブレット縦・小さめのノートPC）では、
   文字を左・イラストを右に置く「PCの絵づくり」に切り替わるのに、
   文字を置く幅が足りず、円が文字の上に乗っていた。
     721px … 見出し「Brand Meets Possibility.」の 53.7% が円の下
     768px … キッカー「TALENT CASTING AGENCY — SINCE 1977」の 11.0%
     840px … 同 3.3%
   （これは260807から起きていたもので、今回のSPの手当てとは別件です）
   この帯では、SPと同じ「文字が上・イラストが下」の縦積みにする。
   901px以上は確定済みのPCのまま（1pxも変えていません）。
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:721px) and (max-width:900px){
  #kvhero .hero-copy{left:clamp(20px,5vw,48px);right:clamp(20px,5vw,48px);
                     top:clamp(56px,9vh,120px);transform:none;max-width:none}
  #kvhero .kv-display{font-size:clamp(2.6rem,6.4vw,3.9rem);max-width:none}
  #kvhero .kicker{padding-left:0}
  #kvhero .kicker::before{display:none}
  #kvhero .kv-sub{font-size:1rem;line-height:1.95;max-width:44em}
  /* イラストは右寄せ。PC（901px以上）と同じ「右にイラスト」の性格を残しつつ、
     文字の下に置くので重ならない。幅を絞ってあるのは、
     横長・低い箱に円を収めると小さくなりすぎるため。
     top は、文字の高さ（キッカー＋見出し＋リード＝約230px）を必ず超える値。 */
  #kvhero .stage{left:auto;right:clamp(0px,3vw,32px);
                 width:min(72vw,520px);top:max(38vh,300px);bottom:0}
}


/* =====================================================================
   2026-08-13 公開前の追加分（ここから下はすべて追記。既存の指定は変えていません）
   ===================================================================== */

/* --- ① タッチ端末で hover が貼り付くのを止める -------------------------
   iOSはタップした要素に :hover が残り続けるため、カードやボタンが
   押したまま浮きっぱなし・色が変わりっぱなしになる。
   ここは (hover:none) の中なので、PCの見え方には一切影響しない。 */
@media (hover:none){
  .work:hover,.member:hover,.point:hover,.totop:hover,.navcta:hover{transform:none}
  .work:hover .media>img,.member:hover .media>img,.media:hover .ph{transform:none}
  .work:hover .media,.member:hover .media{outline:none;box-shadow:none}
  .point:hover{border-top-color:var(--line);box-shadow:none}
  .btn:hover .ar,.navindex a:hover .ar{transform:none}
  .btn.solid:hover{box-shadow:none}
  a.row:hover,.row[data-go]:hover{padding-left:0}
  .row:hover{background:transparent}
  .clients-grid div:hover{background:inherit;color:inherit}
  .seg label:hover{background:inherit}
}

/* --- ② キーボード操作の位置を必ず見えるようにする ---------------------
   もとは .field input:focus / .form select:focus で outline:none にしていたため、
   キーボードだけで操作する人は、いまどこにいるのか分からなくなっていた。
   マウス操作では出ない :focus-visible だけにリングを出すので、
   クリックしたときの見え方は今までと同じ。 */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent-d);
  outline-offset:2px;
  border-radius:2px;
}
/* 濃い地の上（フッター・墨のセクション・閲覧申請パネル）は蛍光で */
footer :focus-visible,.scale :focus-visible,.notice :focus-visible,
.accesspanel :focus-visible,.closing :focus-visible{
  outline-color:#e9f02a;
}
.field input:focus-visible,.field textarea:focus-visible,
.form select:focus-visible{outline:3px solid var(--accent-d);outline-offset:2px}

/* --- ③ 印刷 -----------------------------------------------------------
   会社概要とアクセスは印刷される。濃い地色がベタ塗りで出ると
   1ページ丸ごと黒くなり、地図のiframeは白紙になる。 */
@media print{
  @page{margin:14mm}
  html,body{background:#fff!important;color:#000!important;font-size:10.5pt}
  #hdr,.burger,#totop,.spbar,nav,.navcta,.crumb,
  .amap iframe,.amap-tabs,form,.waccess,.btn,.kv-actions,#kvhero .stage{display:none!important}
  footer,.scale,.notice,.accesspanel,.closing{
    background:#fff!important;color:#000!important;border-top:1px solid #000;
  }
  footer *,.scale *,.notice *,.accesspanel *,.closing *{color:#000!important;background:transparent!important}
  .accesspanel{border:1px solid #000}
  section{padding:10mm 0!important;break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid}
  .work,.member,.point,.faq details{break-inside:avoid}
  img{max-width:100%!important}
  /* フッターのロゴは白抜きなので、紙の上では黒に置き換える */
  footer svg path[fill="#fff"],footer svg path[fill="#FFF"],
  footer svg path[fill="#ffffff"],footer svg path[fill="#f7f5ee"],
  footer svg path[fill="#F7F5EE"]{fill:#000!important}
  /* 地図の代わりに住所が読めればよい */
  .amap::after{content:"※ 地図は https://www.mic-casting.com/contact.html でご覧いただけます";
    display:block;font-size:9pt;color:#000;padding:6pt 0}
  /* メールと電話はURLを添える。地図など長いURLは添えない（紙が読みにくくなる） */
  a[href^="mailto:"]::after,a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:8.5pt}
  a[href^="http"]::after,a[data-go]::after{content:none}
  /* 先頭の余白を詰める */
  main>*>section:first-of-type,main section:first-of-type{padding-top:0!important}
}

/* 機械的な投稿をはじくための入力欄。人には見せない。
   display:none だと一部のボットに無視されるので、画面外へ追い出す方式にしている。 */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
    width:1px!important;height:1px!important;overflow:hidden!important}

/* 旧サイトの個別実績ページ（/project/…）から来た方への案内。
   .htaccess のリダイレクトが付ける ?from=project のときだけ表示する。 */
.fromproj{padding:clamp(18px,2.4vw,26px) 0 0!important}
.fpbox{background:var(--accent-soft);border-left:4px solid var(--accent-d);
       border-radius:3px;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px)}
.fptitle{font-weight:700;font-size:1rem;letter-spacing:.01em;margin-bottom:8px;color:var(--accent-dd)}
.fptext{font-size:.95rem;line-height:2;color:var(--ink-2);max-width:60em}
.fpact{margin-top:14px}
.fplink{display:inline-flex;align-items:center;gap:6px;min-height:44px;
        font-weight:700;font-size:.95rem;color:var(--accent-dd);cursor:pointer;
        text-decoration:underline;text-underline-offset:4px}
.fplink .ar{transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){ .fplink:hover .ar{transform:translateX(5px)} }
@media(max-width:760px){ .fptext{font-size:.9rem;line-height:1.95} }
@media print{ .fromproj{display:none!important} }

/* --- ④ ヘッダーの境界（2026-08-13 決定：A案）--------------------------
   もとは header{border-bottom:1px solid transparent} で、スクロールして初めて
   --line(#e9e7df) の罫線が出る作りだった。そのため表紙ではヘッダーに境界が無く、
   ロゴとナビが何にも乗っていない状態に見えていた。
   地色は白のまま、罫線を「常時表示」かつ1段濃く（#d9d5c6）して部品として立たせる。
   ※ 1pxの領域は元から確保されているため、色を変えるだけでレイアウトは1pxも動かない。 */
header{border-bottom-color:#d9d5c6}
header.scrolled{border-bottom-color:#d9d5c6}

/* --- ⑤ メンバー紹介文を句点で行替え（2026-08-13 指示）-------------------
   対象は森さん・竹嶋さん以外の5名（team.html の p.bio.kuten）。
   森さんは1文が最長48字、竹嶋さんは71字＋クライアント指定の4行構成があるため対象外。

   これまでの作り：
     .member .bio br.sp        → 常に非表示
     .member .bio br.pc        → 860px以下で非表示
     #page-team .g4 .bio br.pc → 541px以上で非表示
   つまり team.html の紹介文は、どの画面幅でも固定改行がほぼ効いておらず、
   1つの段落として流れていた（＝スマホでは文の切れ目が見えない）。

   文ごとに span.sen（sentence＝文）で包み、それをブロックにして「1文＝1行の始まり」にする。
   brではなくブロックにした理由：
     ・折り返した2行目以降も同じ文のまとまりとして扱える
     ・text-wrap:pretty が文単位で効くので、行末に1文字だけ残る形を避けられる
     ・PC/SPで出し分ける必要がない（どの幅でも同じ意味の改行になる）
   文字は一字も変えていない。既存の .nb（文節の途中で折り返さない保護）もそのまま。 */
.bio.kuten .sen{display:block;text-wrap:balance}

/* ── 意味のまとまりを行またぎさせない（2026-08-13 追加）──────────────
   .nb は「文節」の途中で折り返さないための保護。これだけだと、
   ブラウザは文節の切れ目ならどこで折り返してもよいと判断するため、
   意味の通らない位置で行が変わっていた。実測で見つかった例：

     × 不動産・家電・菓子・金融・      ← 列挙の途中で切れ、行末に中黒が残る
       政府広報など幅広い業種を担当。
     × クライアントはスタートアップから ← 「〜から」と「〜まで」が分かれる
       ナショナルまで、商品は草刈機から

   そこで .nb の1つ上に .ph（phrase＝意味のまとまり）を置き、
   「列挙ひとかたまり」「〜から〜までの対」「主語＋述部」を1つの箱にする。
   折り返しは .ph と .ph のあいだでしか起きなくなる。

   ★ .ph の幅は、いちばん狭い本文幅に収まる長さに収めること。
     本文幅の実測: 画面320px→272px / 360px→312px / 390px→342px /
                   430px→382px / 1440px→338px
     いま入っている .ph は最長でも245px。ただし2つだけ272pxのものがあり
     （市村さん「大手飲料から…メガバンクまで」、齋藤さん「不動産・…政府広報など」）、
     画面320〜359pxの帯では収まらないので .long を付けてそこだけ解除する。
     ＝ 320pxの端末では従来どおりの折り返しに戻るだけで、はみ出しは起きない。 */
.bio .ph{white-space:nowrap}
@media(max-width:359px){ .bio .ph.long{white-space:normal} }

/* text-wrap を pretty ではなく balance にした理由（2026-08-13 実測）
   1文が1行に収まらないとき、pretty は「行がいっぱいになるまで詰めて、余りを次の行へ」
   置くため、（ほぼ満杯の行）＋（すかすかの行）が交互に並ぶ。齋藤さんで顕著だった：
       79%  不動産・家電・菓子・金融・政府広報など
       38%  幅広い業種を担当。
   balance は同じ文の行の長さを揃えるので、切れ目が語のまとまりに寄る：
       54%  不動産・家電・菓子・金融・
       63%  政府広報など幅広い業種を担当。
       46%  表現と言葉の力を信じ、        ← 読点で切れる
       71%  心を動かす仕事を大切にしています。
   行数は1行も増減しない。佐藤さんの「ベナン共和国まで。」だけが残る38%の行も解消する。
   ※ balance は文（.sen）単位で効く。段落全体に掛けると意味が変わるので、ここだけ。
   ※ 未対応のブラウザ（Safari 17.4以前）では従来どおりの折り返しになるだけ。 */