/* 小野電気 見本 案a「白い写真誌」
   白い紙に現場の写真を大きく刷る。色は写真と黄色のボタンだけ、字は暖かい墨1色。
   書体：見出し＝M PLUS 1／数字＝Archivo／本文＝BIZ UDPゴシック */
:root{
  --paper:#FFFFFF; --ground2:#EDEDE9; --th:transparent;
  --ink:#201F1D; --sub:#55524D; --line:#D6D4CF;
  --accent:#201F1D; --accent-dark:#FFFFFF;
  --req:#C8321A; --opt:#6F6B66; --field:#6F6B66;
  --yes:#FFD000; --yes-edge-dark:#9C7F00;
  --w-edge-dark:#8F8B85; --n-edge:#6F6B66;
  --focus:#201F1D; --focus-dark:#FFFFFF;
  --dark:#201F1D; --on-dark:#FFFFFF; --on-dark-lead:#E9E7E3; --on-dark-sub:#C9C6C0;
  --line-dark:#6B6862; --th-dark:#2C2A27;
  --note-bg:#FFFBE0; --note-ink:#4D3D00; --note-line:#9A7B00; --note-mark:#FFF0A6;
  --mark-band:#DEDBD3;
  --r:3px; --bw:2px;
  --hard:0 4px 0 var(--ink); --hard-n:0 4px 0 var(--n-edge); --press:0 1px 0 var(--ink);
  --font:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --head:"M PLUS 1","BIZ UDPGothic","Hiragino Sans",sans-serif;
  --num:"Archivo","BIZ UDPGothic",sans-serif;
  --pad:64px; --pad-key:88px;
  --bar:#3A3936; --on-dark-faint:#8F8B85;
}
@media(min-width:960px){:root{--pad:96px;--pad-key:128px}}

/* 土台 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.8;letter-spacing:.02em;word-break:normal;overflow-wrap:anywhere;line-break:strict}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.narrow{max-width:760px;margin:0 auto;padding:0 18px}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.4;letter-spacing:0;margin:0 0 .6em;font-feature-settings:"palt"}
h2{font-size:clamp(1.6rem,7vw,2.5rem)}
h3{font-size:1.22rem;font-weight:700}
p{margin:0 0 1em}
main p{max-width:40em}
b,strong{font-weight:700}
.nb{display:inline-block}
/* 強調は1か所だけ＝蛍光ペンの帯（下線にしない＝押せる字に見せない） */
.mk,.mk .nb{text-decoration:underline;text-decoration-thickness:.36em;text-underline-offset:-.2em;text-decoration-color:var(--mark-band);text-decoration-skip-ink:none}
[id]{scroll-margin-top:72px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* 見本の帯 */
.sample-bar{background:var(--bar);color:var(--on-dark);font-size:12.5px;text-align:center;padding:6px 10px;line-height:1.5}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:2px solid var(--ink)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-name{font-family:var(--head);font-weight:800;font-size:19px;line-height:1.15;letter-spacing:.03em}
.logo-name small{display:block;font-family:var(--font);font-size:11.5px;font-weight:400;color:var(--sub);letter-spacing:.03em;margin-top:4px}
.hd-nav{display:none;gap:2px}
.hd-nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;padding:10px 10px;border-bottom:3px solid transparent}
.hd-nav a:hover{border-bottom-color:var(--line)}
.hd-nav a[aria-current]{border-bottom-color:var(--ink)}
.hd-tel{display:flex;align-items:center;gap:6px;min-height:44px;background:var(--dark);color:var(--on-dark);text-decoration:none;border-radius:var(--r);padding:10px 14px;font-weight:700;font-size:15px;line-height:1.4;white-space:nowrap;box-shadow:0 3px 0 var(--n-edge)}
.hd-tel:active{transform:translateY(2px);box-shadow:0 1px 0 var(--n-edge)}
.hd-tel svg{width:16px;height:16px}
@media(min-width:960px){.hd-nav{display:flex}}

/* ボタン（色の面＋下の影＋右の矢印） */
.btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:440px;min-height:62px;padding:10px 12px 10px 18px;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--hard);text-decoration:none;font-family:inherit;font-size:17.5px;font-weight:700;line-height:1.4;color:var(--ink);cursor:pointer;transition:transform .08s}
.btn:hover > span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.btn:active{transform:translateY(3px);box-shadow:var(--press)}
.btn small{display:block;font-size:14px;font-weight:400;letter-spacing:0;margin-top:2px}
.btn .arr{flex:none;width:34px;height:34px;border-radius:2px;display:grid;place-items:center;font-size:27px;font-weight:700;line-height:1;-webkit-text-stroke:1px currentColor}
.btn-y{background:var(--yes);color:var(--ink)}
.btn-y .arr{background:var(--ink);color:var(--yes)}
.btn-w{background:var(--paper);color:var(--ink)}
.btn-w .arr{background:var(--ink);color:var(--paper)}
.btn-n{background:var(--dark);color:var(--on-dark);box-shadow:var(--hard-n)}
.btn-n:active{box-shadow:0 1px 0 var(--n-edge)}
.btn-n .arr{background:var(--paper);color:var(--ink)}
button.btn{font:inherit;font-size:17.5px;font-weight:700;line-height:1.4;text-align:left;cursor:pointer}
.btns{display:grid;gap:14px}
.btn-hint{font-size:15px;line-height:1.7;color:var(--sub);margin:8px 0 0}
@media(min-width:760px){.wrap .btns,.narrow .btns{grid-template-columns:repeat(2,minmax(0,440px))}}

/* 1画面目（写真→字の順。字は写真に重ねない） */
.fv{background:var(--paper)}
.fv-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fv-photo img.crop-top{aspect-ratio:5/2}
.fv-photo .pc-only{display:none}
.fv-body{display:flex;flex-direction:column;max-width:1080px;margin:0 auto;padding:18px 18px 52px}
.fv-body > *{margin-top:0;margin-bottom:0}
.fv-kicker{display:block;font-size:14.5px;font-weight:700;line-height:1.6;color:var(--sub);letter-spacing:.03em}
.fv h1{font-size:clamp(1.7rem,7.4vw,2.5rem);line-height:1.36;margin-top:8px}
.fv-body > .btns{margin-top:22px}
.fv-body > .btn-hint{margin-top:10px}
.fv-lead{font-size:17px;margin-top:22px}
.fv-lead.fv-note{font-size:15px;line-height:1.7;color:var(--sub);margin-top:8px}
.fv-body > .tags{margin-top:18px}
.fv-body > .doors,.fv-body > .door{margin-top:24px}
.fv-body > .pnote{margin-top:10px}
.fv-top .tags{gap:6px 22px}
@media(max-width:959.98px){
  .fv-kicker{order:1}
  .fv h1{order:2}
  .fv-body > .btns{order:3}
  .fv-body > .btn-hint{order:4}
  .fv-lead{order:5}
  .fv-lead.fv-note{order:6}
  .fv-body > .tags{order:7}
  .fv-body > .doors,.fv-body > .door{order:8}
  .fv-body > .pnote{order:9}
}
@media(min-width:960px){
  .fv{display:grid;grid-template-columns:46fr 54fr;min-height:560px}
  .fv-photo{grid-column:2;grid-row:1;position:sticky;top:62px;align-self:start;height:clamp(560px,calc(100vh - 62px),900px);overflow:hidden}
  .fv-photo img,.fv-photo img.crop-top{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .fv-photo .sp-only{display:none}
  .fv-photo .pc-only{display:block}
  .fv-top .fv-photo img,.fv-photo img.pc-only{object-position:35% 50%}
  .fv-photo img.crop-right{object-position:90% 50%}
  .fv-body{grid-column:1;grid-row:1;max-width:none;margin:0;padding:56px 44px 56px max(18px,calc(50vw - 522px));justify-content:center}
  .fv h1{font-size:min(2.5rem,calc((46vw - max(18px,50vw - 522px) - 44px) / 12.2))}
  .fv-lead{margin-top:14px}
  .fv-body > .btns{margin-top:24px}
}

/* 条件の札（押せない＝枠も影も無い） */
.tags{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 18px;padding:0;list-style:none}
.tags li{position:relative;padding-left:16px;font-size:15.5px;font-weight:700;line-height:1.6}
.tags li::before{content:"";position:absolute;left:1px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.tags li b{font-family:var(--num);font-size:1.5em;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.tags.light li b{font-size:1.3em}

/* 段（白と薄い灰を交互に敷く。区切りは地の色と写真） */
.sec{--sbg:var(--paper);padding:var(--pad) 0;background:var(--sbg)}
main > section.sec:nth-of-type(even){--sbg:var(--ground2)}
.sec.key,.sec.navy{--pad:var(--pad-key)}
.sec.key h2,.sec.navy h2{font-size:clamp(1.75rem,8vw,2.9rem)}
.sec.key a.btn-y,.sec.key a.btn-w,.sec.key a.door,.sec.navy a.btn-y,.sec.navy a.btn-w,.sec.navy a.door{color:var(--ink)}
.sec.tight{padding:24px 0 28px}
.eyebrow{font-size:15px;font-weight:700;line-height:1.6;color:var(--sub);letter-spacing:.04em;margin:0 0 4px}
.navy .eyebrow{color:var(--sub)}
.lead{font-size:18px;line-height:1.85}
#words .lead{font-size:22px;line-height:1.8}
.note-sm{font-size:15px;color:var(--sub)}
#name .note-sm{font-size:17px;color:var(--ink)}
.navy .note-sm{color:var(--sub)}

/* 写真のカード（箱なし＝写真と字だけ） */
.grid2,.grid3{display:grid;gap:30px 24px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}}
.card{background:none;border:0}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card .in{padding:12px 0 0}
.card h3{margin-bottom:.35em}
.card .in > :last-child{margin-bottom:0}
.cap{font-size:15px;line-height:1.7;color:var(--sub);margin:8px 0 0}
.photo-wide img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* 3枚組（大1＋小2） */
.trio{display:grid;gap:22px}
.trio > .card:first-child{margin:0 -18px}
.trio > .card:first-child .in{padding:12px 18px 0}
.trio > .card:not(:first-child){display:grid;grid-template-columns:40% minmax(0,1fr);gap:14px;align-items:start}
.trio > .card:not(:first-child) img{aspect-ratio:4/3}
.trio > .card:not(:first-child) .in{padding:0}
.trio > .card:not(:first-child) h3{font-size:16.5px;margin-bottom:.25em}
.trio > .card:not(:first-child) p{font-size:15px;line-height:1.7}
@media(max-width:379.98px){
  .trio > .card:not(:first-child){display:block}
  .trio > .card:not(:first-child) img{aspect-ratio:16/9}
  .trio > .card:not(:first-child) .in{padding:10px 0 0}
}
@media(min-width:760px){
  .trio{grid-template-columns:7fr 5fr;column-gap:28px;row-gap:26px;align-items:start}
  .trio > .card:first-child{grid-row:1 / span 2;margin:0}
  .trio > .card:first-child .in{padding:12px 0 0}
}

/* 字だけの項目（箱をやめ、上の太い線で区切る） */
.deflist{display:grid;gap:0 40px}
.deflist .card{background:none;border:0;border-top:3px solid var(--ink);border-radius:0;box-shadow:none;padding:14px 0 24px}
.deflist .card .in{padding:0}
.deflist h3{font-size:1.15rem}
@media(min-width:760px){.deflist{grid-template-columns:1fr 1fr}}

/* 段の頭の写真の帯（押せない） */
.photo-band{margin:0 0 40px}
.sec > .photo-band:first-child{margin-top:calc(var(--pad) * -1)}
.photo-band img{width:100%;aspect-ratio:16/9;object-fit:cover}
.photo-band .cap{max-width:1080px;margin:10px auto 0;padding:0 18px}
@media(min-width:760px){.photo-band img{aspect-ratio:21/9;max-height:520px}}
@media(min-width:960px){
  .photo-band{margin-bottom:56px}
  .photo-band:has(img[width="680"]){display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);column-gap:28px;align-items:end;max-width:1080px;margin-left:auto;margin-right:auto;padding:0 18px}
  .photo-band:has(img[width="680"]) img{aspect-ratio:auto;max-height:none}
  .photo-band:has(img[width="680"]) .cap{margin:0;padding:0}
}
/* 段の頭の写真から入り、見出しを写真の下の端にかぶせる */
.photo-band.lead{margin-bottom:0}
.photo-band.lead img{aspect-ratio:3/2}
.photo-band.lead + .narrow > .head,.photo-band.lead + .wrap > .head{position:relative;margin:-58px 40px 0 -18px;padding:18px 18px 2px;background:var(--sbg)}
@media(min-width:760px){
  .photo-band.lead img{aspect-ratio:2/1;max-height:none}
  .photo-band.lead + .narrow > .head,.photo-band.lead + .wrap > .head{margin:-80px 0 0;padding:24px 32px 2px 0;max-width:620px}
}
@media(min-width:960px){
  .photo-band.lead,.photo-band.lead:has(img[width="680"]){display:block;max-width:760px;margin:0 auto;padding:0 18px}
  .sec > .photo-band.lead:first-child{margin-top:0}
  .photo-band.lead img,.photo-band.lead:has(img[width="680"]) img{aspect-ratio:3/2}
}
/* 段の途中の写真（4〜5画面に1枚） */
.photo-mid{margin:32px -18px}
.photo-mid img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media(min-width:760px){.photo-mid{margin:40px 0;max-width:724px}}

/* 1日の流れ */
.day{list-style:none;margin:0;padding:0;border-left:2px solid var(--ink)}
.day li{position:relative;padding:0 0 18px 22px}
.day li:last-child{padding-bottom:4px}
.day li::before{content:"";position:absolute;left:-6px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.day time{display:block;font-family:var(--num);font-weight:700;font-size:22px;line-height:1.35;letter-spacing:0;font-variant-numeric:tabular-nums}

/* 給料の段（箱なし・上の線と大きな数字の階段） */
.steps{display:grid;gap:24px}
.step{border-top:3px solid var(--ink);padding:10px 0 0}
.step.top{border-top-width:6px}
.step > p:first-child{margin:0 0 2px;font-size:15.5px;font-weight:700}
.step .amt{font-family:var(--num);font-size:3rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.step .amt:has(br){font-size:1.9rem;line-height:1.3}
.step .amt small{font-family:var(--font);font-size:.95rem;font-weight:700;margin-left:2px;letter-spacing:0}
.step .note-sm{margin:6px 0 0}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);align-items:end;column-gap:28px}.steps .step:nth-child(2){padding-top:30px}.steps .step:nth-child(3){padding-top:46px}}
#pay > .wrap > .steps:first-child{margin-bottom:36px}

/* 声（箱なし・色の帯なし） */
.voice{position:relative}
.voice .who{font-size:15px;font-weight:700;line-height:1.6;color:var(--sub);margin-bottom:6px}
.voice .big{font-family:var(--head);font-weight:800;font-size:22px;line-height:1.5;margin-bottom:.45em}
.voice blockquote{margin:0;font-family:var(--head);font-weight:500;font-size:19px;line-height:1.8}
.voice blockquote p{max-width:none}
.stack{display:grid;gap:44px}
/* 先輩の一言から入る段 */
#work > .narrow > .voice:first-child{margin-bottom:36px}
#work > .narrow > .voice:first-child blockquote{font-size:21px;font-weight:700;line-height:1.7}

/* 表（見出しの行は塗らない。罫線は表の中だけ） */
.tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.75;border-top:2px solid var(--ink);margin:0 0 8px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:12px 14px 12px 0;vertical-align:top;text-align:left}
.tbl th{background:none;width:30%;font-weight:700;white-space:nowrap}
@media(max-width:600px){.tbl th,.tbl td{display:block;width:100%;white-space:normal}.tbl th{border-bottom:0;padding:12px 0 2px}.tbl td{padding:2px 0 14px}}

/* よくある質問（開いたまま・箱なし・線なし） */
.faq{display:grid;gap:10px}
.faq > div{padding:14px 0}
.faq .q{display:flex;gap:12px;font-weight:700}
.faq .a{display:flex;gap:12px;margin-top:8px}
.faq .q::before,.faq .a::before{flex:none;width:24px;font-family:var(--num);font-size:24px;line-height:1.3;color:var(--accent)}
.faq .q::before{content:"Q";font-weight:700}
.faq .a::before{content:"A";font-weight:500}

/* 先に、大変なところも（箱にしない。上の太い線） */
.honest{background:none;border:0;border-top:3px solid var(--ink);border-radius:0;padding:12px 0 6px}
.honest > :last-child{margin-bottom:0}
@media(min-width:760px){.honest.wide{grid-column:1/-1}}

/* 見学から入社まで（順番がある物だけ番号） */
.flow{counter-reset:f;list-style:none;padding:0;margin:0 0 8px}
.flow li{counter-increment:f;position:relative;padding:10px 0 12px 50px}
.flow li::before{content:counter(f);position:absolute;left:0;top:4px;font-family:var(--num);font-weight:700;font-size:30px;line-height:1.2;color:var(--accent);font-variant-numeric:tabular-nums}
.flow b{display:block}

/* 箇条書き・確かめの印 */
main ul:not([class]),main ul.lead{list-style:none;padding:0;margin:0 0 1em}
main ul:not([class]) > li,main ul.lead > li{position:relative;padding-left:20px;margin:6px 0}
main ul:not([class]) > li::before,main ul.lead > li::before{content:"";position:absolute;left:3px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sure{list-style:none;padding:0;margin:22px 0}
.sure li{position:relative;padding-left:34px;margin:10px 0}
.sure li::before{content:"";position:absolute;left:5px;top:.4em;width:16px;height:9px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-45deg)}

/* 入力の欄 */
.form{margin:0}
.form label{display:block;font-size:16px;font-weight:700;margin:26px 0 8px}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea,.form select{display:block;width:100%;min-height:52px;font-family:inherit;font-size:17px;color:var(--ink);padding:12px;border:2px solid var(--field);border-radius:var(--r);background:var(--paper)}
.form textarea{min-height:120px;line-height:1.7}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.req,.opt{display:inline-block;font-size:12.5px;font-weight:700;line-height:1.7;color:var(--on-dark);padding:0 7px;border-radius:var(--r);margin-left:8px;vertical-align:2px}
.form .req{background:var(--req)}
.form .opt{background:var(--opt)}
.form .promise{background:none;border-top:3px solid var(--ink);border-radius:0;padding:12px 0 0;font-size:15px;margin:24px 0}
.form .btn{margin-top:20px}
.choice{display:grid;gap:8px}
.form .choice label{display:flex;align-items:center;gap:12px;margin:0;min-height:52px;padding:10px 14px;font-size:16px;font-weight:700;line-height:1.5;border:2px solid var(--field);border-radius:var(--r);background:var(--paper);cursor:pointer}
.form .choice label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--ground2)}
.choice input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ink)}
.choice.two{grid-template-columns:1fr 1fr}

/* 下の固定の帯（スマホだけ） */
.fixbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1.35fr;gap:8px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--ink)}
.fixbar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;border:2px solid var(--ink);border-radius:var(--r);box-shadow:0 3px 0 var(--ink);text-decoration:none;font-weight:700;font-size:15.5px;color:var(--ink)}
.fixbar a:active{transform:translateY(2px);box-shadow:var(--press)}
.fixbar .f-tel{background:var(--paper)}
.fixbar .f-go{background:var(--yes)}
.fixbar svg{width:18px;height:18px;flex:none}
body.has-fix{padding-bottom:80px}
@media(min-width:960px){.fixbar{display:none}body.has-fix{padding-bottom:0}}
body.fix-later .fixbar{transition:transform .25s ease,visibility 0s linear}
body.fix-later.fix-hide .fixbar{transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}

/* 入口の扉（押せる＝枠＋下の影＋右の矢印） */
.doors{display:grid;gap:18px}
@media(min-width:760px){.doors{grid-template-columns:repeat(3,1fr)}.doors.two{grid-template-columns:1fr 1fr}.doors.one{grid-template-columns:minmax(0,460px)}}
.door{display:flex;flex-direction:column;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--hard);transition:transform .08s}
.door:active{transform:translateY(3px);box-shadow:var(--press)}
.door:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.door img{width:100%;aspect-ratio:3/2;object-fit:cover}
.door .in{flex:1;display:flex;flex-direction:column;padding:14px 16px}
.door .in > p:first-child{margin:0 0 .4em}
.door h3{margin-bottom:.3em}
.door .go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:8px;font-weight:700;line-height:1.5}
.door .go span{flex:none;width:32px;height:32px;border-radius:2px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:24px;font-weight:700;line-height:1;-webkit-text-stroke:1px currentColor}
/* このページの中へ飛ぶ扉は、ボタンと同じ細さに */
a.door[href^="#"] .in{padding:10px 12px 10px 16px}
a.door[href^="#"] h3{font-size:17px;margin-bottom:.1em}
a.door[href^="#"] .go{padding-top:2px;font-size:15px;font-weight:400;color:var(--sub)}
a[href="#youkou"] .go span,a[href="#keiken"] .go span,a[href="#family"] .go span,a[href="#gaiyo"] .go span,a[href="#trade"] .arr,a[href="#coop"] .arr{transform:rotate(90deg)}
a[href="#voice"] .go span{transform:rotate(-90deg)}

/* 事実の欄（上の線と大きな字） */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:0 0 8px}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{border-top:3px solid var(--ink);padding:10px 0 18px}
.fact .k{font-size:14px;font-weight:700;line-height:1.6;color:var(--sub)}
.fact .v{font-family:var(--num);font-size:19px;font-weight:700;line-height:1.45;margin-top:4px;font-variant-numeric:tabular-nums}

/* 提案メモ（?notes=1 の時だけ）・まだ決まっていない所（公開の見た目では印を付けない） */
.pnote{display:none;font-size:13.5px;line-height:1.6;padding:8px 10px;border-radius:var(--r);margin:10px 0}
body.notes .pnote{display:block;background:var(--note-bg);color:var(--note-ink);border:1px dashed var(--note-line)}
body.notes .blank{background:var(--note-mark);color:var(--ink)}
/* 了解待ちの注記・写真の空き枠は ?notes=1 の時だけ出す */
.pend,.wait,.photo-blank,.door-blank{display:none}
body.notes .pend{display:block}
body.notes .wait{display:revert}
body.notes .photo-blank,body.notes .door-blank{display:grid}
body.notes .pub{display:none}

/* 足元 */
.ft{background:var(--dark);color:var(--on-dark-sub);padding:48px 0 32px;font-size:15px;line-height:1.8}
.ft a{color:var(--on-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ft :focus-visible{outline-color:var(--focus-dark)}
.ft p{margin:0 0 1em}
.ft .ft-name{color:var(--on-dark);font-family:var(--head);font-weight:800;font-size:17px;line-height:1.5;margin:0 0 6px}
.ft .cols{display:grid;gap:22px}
@media(min-width:760px){.ft .cols{grid-template-columns:1.3fr 1fr 1fr}}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin:0}
.ft li a{display:inline-flex;align-items:center;min-height:44px}
.ft .copy{margin:28px 0 0;font-size:12.5px;color:var(--on-dark-faint)}

/* パンくず */
.crumb{font-size:15px;color:var(--sub);padding:12px 0 0}
.crumb a{color:var(--ink)}

/* 下層ページの頭 */
.ph{background:var(--paper);padding:36px 0 32px}
.ph h1{font-size:clamp(1.5rem,7.2vw,2.6rem);line-height:1.38;margin:0 0 .4em}
.ph h1 + p{margin:0}
.ph.short{padding:28px 0 26px}
.ph.short h1{font-size:clamp(1.5rem,6.4vw,2.2rem)}
@media(min-width:960px){.ph{padding:64px 0 52px}.ph.short{padding:48px 0 40px}}
.ph-photo img{width:100%;aspect-ratio:21/9;max-height:420px;object-fit:cover}
@media(min-width:760px){.ph-photo img[width="680"]{max-width:680px;margin-left:max(18px,calc(50vw - 522px))}}

/* 写真の切り方 */
.crop-right{object-position:78% 50%}
.crop-left{object-position:18% 50%}
.crop-low{object-position:50% 75%}
.crop-top{object-position:60% 0%}

/* 写真の空き・小さい札・署名（空き枠は ?notes=1 の時だけ） */
.photo-blank,.door-blank{background:var(--ground2);border:2px dashed var(--field);border-radius:var(--r);place-items:center;align-content:center;color:var(--sub);font-weight:700;line-height:1.6;text-align:center;padding:16px}
.photo-blank{min-height:180px;margin:16px 0}
.door-blank{aspect-ratio:3/2;border:0;border-radius:0;outline:2px dashed var(--field);outline-offset:-12px}
.pend{font-size:15px;font-weight:700;line-height:1.6;color:var(--sub);margin:0 0 8px}
.sign{text-align:right;max-width:none}

/* 動きを減らす設定 */
@media(prefers-reduced-motion:reduce){body.fix-later .fixbar,body.fix-later.fix-hide .fixbar{transition:none}.btn,.door{transition:none}}

/* 余白 */
.mt1{margin-top:12px!important}
.mt2{margin-top:24px!important}
.mt3{margin-top:36px!important}
.m0{margin:0!important}
.mb2{margin-bottom:24px!important}

/* 頭の電話（PCは番号）・最初の画面の扉3枚（PCは縦に並べる） */
.hd-tel-n{display:none}
@media(min-width:960px){
  .hd-tel-l{display:none}
  .hd-tel-n{display:inline;font-family:var(--num);font-size:18px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .fv-body > .doors.three{grid-template-columns:1fr}
}

/* 本番で足した部品 */
/* 読みもの（仕事を知る）の本文。案aの墨1色・白い紙のまま。色を足さない */
.prose{font-size:17px;line-height:1.95}
.prose h2{font-size:clamp(1.35rem,5.6vw,1.85rem);margin:2.2em 0 .7em;padding-top:.9em;border-top:3px solid var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.6em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.4em}
.prose li{margin:0 0 .45em}
.prose .tbl{margin:.4em 0 1.4em}
.prose .honest{margin:1.6em 0}
.prose a{font-weight:700}
.btns.list .btn{max-width:none}
.btns.list .btn small{font-weight:400}
/* 送る人には見えない欄（機械だけが埋める） */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.form button[disabled]{opacity:.6;cursor:wait}
[hidden]{display:none!important}