:root{
  --ink:#16211e; --soft:#4a5551; --paper:#f5f4f0; --card:#fff; --line:#ded9cf;
  --gold:#a9772c; --teal:#1c6b60; --teal-soft:#dceae6; --crit:#a83a30; --crit-soft:#f3ded9; --go:#2c6e4f;
  --line-soft:#e7e2d8; --go-soft:#dce9df;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;line-height:1.7}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 22px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:19px;font-weight:600;color:var(--ink)}
.brand span{font-size:12px;color:var(--gold);margin-left:6px}
.nav nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.me{color:var(--soft);font-size:12px}
main{max-width:960px;margin:0 auto;padding:26px 22px}
h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;font-size:26px;margin:0 0 6px}
.lead{color:var(--soft);margin:0 0 22px}
.btn{background:var(--ink);color:#fff;padding:9px 16px;border-radius:8px;display:inline-block;border:0;cursor:pointer;font-size:14px}
.btn:hover{text-decoration:none;opacity:.92}
.btn-gold{background:var(--gold)}
.btn-ghost{border:1px solid var(--line);padding:8px 14px;border-radius:8px;color:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:0 1px 2px rgba(20,33,30,.05),0 8px 22px rgba(20,33,30,.04);display:flex;flex-direction:column;gap:8px}
.card .code{font-family:ui-monospace,monospace;font-size:11px;color:var(--gold);letter-spacing:.08em}
.card h3{font-family:"Hiragino Mincho ProN",serif;font-size:18px;margin:2px 0 0}
.card .meta{font-size:13px;color:var(--soft)}
.card .hl{font-size:13.5px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.badge{font-size:11px;background:var(--teal-soft);color:var(--teal);padding:3px 9px;border-radius:999px}
.badge.price{background:#f0e6d2;color:var(--gold)}
.lock{margin-top:auto;font-size:12px;color:var(--soft);border-top:1px dashed var(--line);padding-top:9px}
.gate{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:16px 18px;margin:18px 0}
.gate b{color:var(--ink)}
table.kv{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.kv th{text-align:left;width:34%;background:var(--paper);color:var(--soft);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.kv td{padding:11px 14px;border-bottom:1px solid var(--line)}
form.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:460px}
form.box label{display:block;font-size:13px;color:var(--soft);margin:12px 0 4px}
form.box input,form.box select,form.box textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
.flash{padding:11px 15px;border-radius:9px;margin:0 0 16px;font-size:14px}
.flash.ok{background:var(--teal-soft);color:var(--teal)}
.flash.err{background:#f3ded9;color:var(--crit)}
.dim{color:var(--soft);font-size:12px}
footer{max-width:960px;margin:30px auto;padding:18px 22px;border-top:1px solid var(--line);color:var(--soft);font-size:12px;display:flex;flex-direction:column;gap:6px}
.status{font-size:11px;padding:2px 8px;border-radius:999px;font-family:ui-monospace,monospace}
.status.published{background:var(--teal-soft);color:var(--teal)}
.status.review{background:#f0e6d2;color:var(--gold)}
.status.draft{background:#eee;color:#777}
.legal{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.legal h2{font-family:"Hiragino Mincho ProN",serif;font-size:20px;margin:22px 0 8px}
.legal h3{font-size:15px;margin:16px 0 6px;color:var(--ink)}
.legal h4{font-size:13.5px;margin:12px 0 4px;color:var(--soft)}
.legal p{margin:0 0 10px;font-size:14px}
.legal ul{margin:0 0 12px;padding-left:20px;font-size:14px}
.legal li{margin:3px 0}
footer nav a{color:var(--soft)}

/* ---------- タップ領域確保(全端末 min 36-38px) ---------- */
.nav nav a,.nav a.brand,.nav .btn,.nav .btn-ghost{display:inline-flex;align-items:center;min-height:38px}
.nav a.brand{align-items:baseline}
footer nav a,.legal-nav a{display:inline-flex;align-items:center;min-height:36px}
/* 本文中のインラインリンクは見た目を保ちつつヒット領域を拡大(負マージンで行送りを維持) */
main p a:not(.btn):not(.btn-ghost),.legal a:not(.btn),.dim a,.lead a,
.crumbs a,.trust a,.op-block a,form.box label a{
  display:inline-block;padding:9px 4px;margin:-9px -4px;vertical-align:middle}

/* ---------- メルカリ風トップ ---------- */
.hero{background:linear-gradient(160deg,var(--card),var(--paper));border:1px solid var(--line);
  border-radius:16px;padding:34px 26px;margin-bottom:16px}
.hero h1{font-size:clamp(22px,4vw,32px);line-height:1.3;margin:0 0 10px}
.hero .lead{margin:0 0 18px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn.btn-gold,.btn-ghost.lg{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.3;padding:12px 20px;border-radius:10px}
.btn small,.btn-ghost small{font-weight:400;font-size:11px;opacity:.85;margin-top:2px}
.btn-ghost.lg{border:1px solid var(--line);background:var(--card);color:var(--ink)}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 20px}
.trust>div{background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}
.trust b{display:block;font-size:14px;margin-bottom:3px}
.trust span{font-size:12px;color:var(--soft)}
.filter{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tab{font-size:13px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--soft)}
.tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.frow{display:flex;flex-wrap:wrap;gap:8px}
.frow input,.frow select{flex:1;min-width:120px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
.frow .btn{flex:0 0 auto}
.count{font-size:13px;color:var(--soft);margin:4px 2px 10px}
.card{padding:0;overflow:hidden}
.card .thumb{position:relative;height:104px;display:flex;align-items:center;justify-content:center}
.card .thumb span{color:#fff;font-family:"Hiragino Mincho ProN",serif;font-size:17px;letter-spacing:.05em;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.thumb.b1{background:linear-gradient(135deg,#c2703d,#8a4b28)}
.thumb.b2{background:linear-gradient(135deg,#5b4a86,#372a5c)}
.thumb.b3{background:linear-gradient(135deg,#c25b7a,#8a3d59)}
.thumb.b4{background:linear-gradient(135deg,#2f8f7f,#1c6b60)}
.thumb.b5{background:linear-gradient(135deg,#3d78c2,#28518a)}
.thumb.b6{background:linear-gradient(135deg,#6b7280,#454b54)}
.card .cbody{padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.smpbadge{position:absolute;top:8px;left:8px;background:var(--gold);color:#fff;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:6px;font-style:normal;letter-spacing:.06em}
.card.sample{cursor:default;opacity:.98}
.card.sample .note{font-size:11px;color:var(--soft);border-top:1px dashed var(--line);padding-top:7px;margin-top:2px}
.badge.ok{background:var(--go-soft);color:var(--go)}
.empty{text-align:center;background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:34px 20px;margin:6px 0 22px}
.empty h2{font-size:20px;margin:0 0 8px}
.empty .hero-cta{justify-content:center;margin-top:14px}
.samples{margin-top:28px;border-top:1px solid var(--line-soft);padding-top:20px}
.samples>h2{font-size:19px;margin:0 0 4px}
.samples>h2 span{font-size:13px;color:var(--gold);font-family:"Hiragino Kaku Gothic ProN",sans-serif}
.samples .dim{margin-top:10px}
@media(max-width:560px){.hero-cta .btn,.hero-cta .btn-ghost{width:100%}}
.status.rejected{background:#f3ded9;color:var(--crit)}
/* L2詳細の閲覧者透かし(スクショ抑止) */
.l2detail{position:relative;overflow:hidden}
.l2detail>.l2wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(13px,4vw,24px);color:rgba(168,58,48,.10);transform:rotate(-22deg);
  pointer-events:none;user-select:none;font-weight:700;letter-spacing:.08em;z-index:0;white-space:nowrap}
.l2detail>*{position:relative;z-index:1}
.l2detail>.l2wm{z-index:0}
/* ヒーローに信頼アドバイザー人物 */
.hero.hero-person{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.hero.hero-person .hero-text{min-width:0}
.hero-trustline{font-size:12px;color:var(--teal);font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.hero-img{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-img img{width:100%;max-width:460px;border-radius:16px;object-fit:cover;
  box-shadow:0 6px 24px rgba(20,33,30,.14);display:block}
.hero-cap{margin-top:10px;font-size:13px;font-weight:700;color:var(--gold)}
@media(max-width:720px){
  .hero.hero-person{grid-template-columns:1fr;gap:14px}
  .hero-img{order:-1}
  .hero-img img{max-width:100%;max-height:230px;object-position:top}
  .hero-cap{position:absolute;bottom:8px;background:rgba(255,255,255,.9);padding:3px 10px;border-radius:999px;margin:0}
}

/* ===== 画像リッチ刷新 ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ヒーロー主役バナー(16:9・見切れゼロ・既存max-width/max-heightを上書き) */
.hero-img img{width:100%;max-width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
@media(max-width:720px){.hero-img img{aspect-ratio:16/9;max-height:none}}
.advisor-chip{display:flex;align-items:center;gap:11px;margin-top:18px;background:var(--card);border:1px solid var(--line-soft);border-radius:999px;padding:7px 14px 7px 7px;width:fit-content;max-width:100%}
.advisor-chip img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;flex:0 0 auto}
.advisor-chip b{display:block;font-size:13px}
.advisor-chip span{font-size:11.5px;color:var(--soft)}
/* 写真カバーのサンプルカード(4:3・全枚同サイズ) */
.card .thumb.photo{height:auto;aspect-ratio:4/3;padding:0;display:block;position:relative;overflow:hidden}
.thumb.photo img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,0) 45%)}
.genre-tag{position:absolute;left:11px;bottom:10px;z-index:2;color:#fff;font-family:"Hiragino Mincho ProN",serif;font-weight:600;font-size:14px;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.card.sample .smpbadge{left:auto;right:10px;top:10px;z-index:3;background:rgba(169,119,44,.94)}
/* ご利用の流れ */
.flow{margin-top:30px}
.flow>h2,.faq>h2{font-family:"Hiragino Mincho ProN",serif;font-size:20px;margin:0 0 14px}
.flow-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.flow .step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(20,33,30,.05),0 8px 22px rgba(20,33,30,.04)}
.flow .step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:"Hiragino Mincho ProN",serif;font-size:16px;margin-bottom:8px}
.flow .step b{display:block;font-size:15px;margin-bottom:5px}
.flow .step p{font-size:13px;color:var(--soft);margin:0}
/* FAQ */
.faq{margin-top:30px;margin-bottom:8px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin-bottom:9px}
.faq summary{cursor:pointer;font-weight:700;font-size:14px;padding:13px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋";color:var(--gold);margin-right:9px;font-weight:700}
.faq details[open] summary::before{content:"−"}
.faq details p{font-size:13.5px;color:var(--soft);margin:0 0 13px;line-height:1.75}

/* ===== 全ページ トップ級統一 ===== */
/* ページ小帯 */
.hero.hero-sm{padding:20px 24px;margin-bottom:16px}
.hero-sm h1{font-size:clamp(20px,3.4vw,26px);margin:6px 0 4px}
.hero-sm .lead{margin:0;max-width:64ch}
.crumbs{font-size:12px;color:var(--soft);font-family:ui-monospace,monospace}
.crumbs a{color:var(--teal)}
.crumbs span{color:var(--ink)}
/* 2カラム(フォーム＋サイド) */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
.split .side{display:flex;flex-direction:column;gap:14px}
@media(max-width:720px){.split{grid-template-columns:1fr} .split .side{order:2}}
/* 信頼帯(フッター上・全ページ) */
.trust.trust-foot{margin-top:30px}
.trust-foot a{color:var(--teal);text-decoration:underline}
.keihyo{max-width:none;margin:10px 2px 0;font-size:12px}
.op-block{font-size:12.5px;line-height:1.7;color:var(--ink)}
.op-block a{color:var(--teal)}
/* 安心3点インライン */
.assure{display:grid;gap:8px;margin:0}
.assure li{list-style:none;font-size:13px;padding-left:22px;position:relative;color:var(--ink)}
.assure li::before{content:"✓";position:absolute;left:0;color:var(--go);font-weight:700}
/* 開示段階インジケータ ●—○—○ */
.progress{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--soft);margin:0 0 12px;flex-wrap:wrap}
.progress .st{display:inline-flex;align-items:center;gap:5px}
.progress .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:#fff;flex:0 0 auto}
.progress .st.done .dot{background:var(--teal);border-color:var(--teal)}
.progress .st.now .dot{background:var(--gold);border-color:var(--gold)}
.progress .st.now{color:var(--ink);font-weight:700}
.progress .bar{width:22px;height:2px;background:var(--line)}
/* 掲載イメージ帯(submit上部) */
.sample-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.sample-strip::-webkit-scrollbar{display:none}
.sample-strip img{width:104px;height:78px;object-fit:cover;border-radius:8px;flex:0 0 auto;border:1px solid var(--line)}
/* 狭幅は横スクロール帯を折返しギャラリー化(画面外はみ出しゼロ) */
@media(max-width:720px){
  .sample-strip{flex-wrap:wrap;overflow-x:visible}
  .sample-strip img{width:calc((100% - 16px)/3);height:auto;aspect-ratio:4/3}
}
.okbadge{display:inline-block;background:var(--go-soft);color:var(--go);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
/* スマホ固定CTAバー */
.mcta{display:none}
@media(max-width:720px){
  .mcta{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);
    border-top:1px solid var(--line);padding:8px 12px;box-shadow:0 -4px 16px rgba(0,0,0,.10)}
  .mcta a{flex:1;text-align:center;padding:12px 8px;border-radius:10px;font-weight:700}
  body{padding-bottom:66px}
}
/* 実案件カードの業種イメージ表記 */
.imgbadge{position:absolute;right:10px;top:10px;z-index:3;background:rgba(22,33,30,.62);color:#fff;
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px;font-style:normal;letter-spacing:.06em}
/* 案件詳細のイメージヒーロー */
.case-hero{position:relative;margin:6px 0 14px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;max-height:300px}
.case-hero img{width:100%;height:100%;object-fit:cover;display:block}

/* webp フォールバック用 <picture> はレイアウトに影響させない(既存の img 指定をそのまま効かせる) */
picture{display:contents}

/* 2026-10-11 sitefix */
/* 52pxの丸いアバターを維持し、右寄りに写る顔を枠内へ寄せる。 */
@media (max-width: 834px) {
  .advisor-chip img[src*="hero_advisor."] { object-position: 100% top; }
}