/* 2026-10-28 ブラッシュアップ
   最初の画面を「WalkOnは、＿＿会社です。」の空欄の見出しにする。組み直した区画に赤字の印を入れる。
   既存の corporate.css / experience.css の見出しの固定高さ（3行の標語向け）をここで上書きする。 */

/* 見出し：3行（WalkOnは、／空欄／会社です。）。空欄が2行に折り返しても揺れないよう、高さは最小値で確保する */
#hl{height:auto;min-height:6.2em}
#hl .hl-line{display:block;line-height:1.5}
#hlA{height:auto}
#hl .hl-mid{min-height:1.5em}
#hl .blank{display:inline;height:auto;min-width:0;padding:0 .08em;border-bottom:2px solid var(--rule);font:inherit;white-space:normal;transition:color .3s ease,border-color .3s ease}
#hl .blank.pencil{font-family:var(--f-hand);font-weight:600;color:var(--ink-2)}
#hl .blank.set{color:var(--shu);border-bottom-color:var(--shu)}
#hl .blank.writing::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:2px;vertical-align:-.08em;background:var(--shu);animation:brush-blink .8s steps(2) infinite}
#hl .blank.strike{text-decoration:line-through;text-decoration-color:var(--shu);text-decoration-thickness:3px}
#hlFor{color:var(--ink)}
#hl .ph{display:inline-block}
#hlFor[hidden]{display:none}
@keyframes brush-blink{50%{opacity:0}}

/* 入力欄の下の注意書き */
.note.rebuild{font-size:12px;line-height:1.85;color:var(--ink-2);margin-top:12px;max-width:31em}

/* 組み替えた区画の印：左の赤い線と、右上の書き込み。区画が見えたときに出る */
section.reworked{position:relative}
.rework-rule{position:absolute;left:-14px;top:0;bottom:0;width:2px;background:var(--shu);transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.rework-mark{position:absolute;top:0;right:0;font-family:var(--f-hand);font-weight:600;font-size:14px;line-height:1.4;color:var(--shu);opacity:0;transform:translateY(6px) rotate(-2deg);transition:opacity .5s ease .25s,transform .5s ease .25s;pointer-events:none;white-space:nowrap}
section.reworked.seen .rework-rule{transform:scaleY(1)}
section.reworked.seen .rework-mark{opacity:1;transform:rotate(-2deg)}

/* できること：組み直す前は、工程ごとに全部の仕事を並べる */
#flow:not(.tuned) .stage .slot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

@media (max-width:760px){
  #hl{min-height:7.6em}
  .rework-rule{left:-8px}
  .rework-mark{position:static;display:block;margin-bottom:8px;font-size:12px;transform:none}
  section.reworked.seen .rework-mark{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .rework-rule,.rework-mark,#hl .blank{transition:none}
  #hl .blank.writing::after{animation:none}
}

/* 丸文字を使わない：手書き用の書体の指定を、サイトの明朝体に置き換える
   （Klee One は読み込まれておらず、Mac では丸ゴシックに置き換わっていたため） */
:root{--f-hand:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif}
#hl .blank.pencil{font-family:var(--f-min);font-weight:500;color:var(--ink-3)}
.rework-mark{font-family:var(--f-min);font-weight:600;letter-spacing:.04em}

/* 「WalkOnとは」：赤い線を添えた小さな見出しにする（以前の大きな「W.」の置き換え） */
.company-intro{padding-left:0}
.intro-mark{position:static;display:flex;align-items:center;gap:10px;grid-column:1/-1;margin:0 0 10px;font:600 14px/1.5 var(--f-min);letter-spacing:.08em;color:var(--shu)}
.intro-mark::before{content:"";display:block;width:24px;height:2px;background:var(--shu)}
@media (max-width:760px){.company-intro{padding-left:0}.intro-mark{font-size:13px;top:auto}}

/* よくあるご相談：問いと一行の答えを並べ、説明は「もっと読む」で開く */
#faq .sub{max-width:40em}
.faq-list{margin-top:28px;border-top:1px solid var(--ink)}
.faq-rest{margin-top:0;border-top:0}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:baseline;padding:18px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-no{grid-row:1/3;font:500 12px/1.6 var(--f-mono);color:var(--shu);letter-spacing:.08em;padding-top:4px}
.faq-q{font:600 clamp(17px,2vw,20px)/1.5 var(--f-min);letter-spacing:.03em}
.faq-a{grid-column:2;font-size:14px;line-height:1.7;color:var(--ink-2)}
.faq-more{grid-column:3;grid-row:1/3;align-self:center;font-size:12px;color:var(--ink-2);border-bottom:1px solid currentColor;white-space:nowrap}
.faq-item summary:hover .faq-q{color:var(--shu)}
.faq-item summary:focus-visible{outline:2px solid var(--shu);outline-offset:4px}
.faq-body{padding:0 0 22px calc(3.2em + 16px);max-width:52em}
.faq-body p{font-size:15px;line-height:1.95;color:var(--ink-2)}
.faq-try{margin-top:14px;appearance:none;border:1px solid var(--ink);background:transparent;color:var(--ink);font:500 13px/1.5 var(--f-sans);padding:10px 16px;cursor:pointer}
.faq-try:hover{background:var(--ink);color:var(--paper)}
.faq-toggle{margin-top:20px;appearance:none;border:0;background:none;padding:0;font:500 14px/1.6 var(--f-sans);color:var(--ink);border-bottom:1px solid var(--ink);cursor:pointer}
@media (max-width:760px){
  .faq-item summary{grid-template-columns:2.4em minmax(0,1fr);column-gap:10px}
  .faq-more{grid-column:2;grid-row:auto;justify-self:start;margin-top:4px}
  .faq-body{padding-left:calc(2.4em + 10px)}
}
#faq h2 .ph{display:inline-block}
.word .w .ph{display:inline-block}
@media (max-width:374px){#chooser .word .w{font-size:14px;letter-spacing:.01em}}
@media (max-width:340px){#chooser .word .w{font-size:12.5px;letter-spacing:0}}