@charset "utf-8";
/* ケンセツキャリア サービスページ（/service/kensetsu-career/）
   2026-09-14: kensetsu-career-page/index.html（draft1系・PC/SP両対応の新デザイン）へ全面差し替え。
   旧版（.site-shell で max-width:430px のスマホ専用デザイン）は
   phase3/_archive/2026-09-14_kensetsu-career_v1/site.css に退避。
   画像は同階層 assets/ を参照（url() は使わず HTML 側の <img> で読む）。 */
:root{
  --green:#069744;
  --green-dark:#006a34;
  --green-soft:#edf8ef;
  --lime:#a4cf18;
  --orange:#ff6a1b;
  --orange2:#ff9d18;
  --text:#09251f;
  --muted:#51625d;
  --line:#e4eee8;
  --white:#fff;
  --shadow:0 10px 24px rgba(0,65,35,.09);
  /* セクションの上下余白の基準（2026-09-14 統一）。個別に数値を書かない。 */
  --sec-pt:56px;
  --sec-pb:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,calc(100% - 48px));margin:0 auto}
.section-title{font-size:32px;line-height:1.35;text-align:center;margin:0 0 38px;font-weight:900;letter-spacing:.02em}
.section-title .accent{color:var(--green)}
.section-title .accent2{color:var(--orange)}

/* header */
.site-header{height:74px;background:#fff;display:flex;align-items:center;border-bottom:1px solid #eef3ef;position:relative;z-index:10}
.header-inner{width:min(1180px,calc(100% - 36px));margin:0 auto;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:16px;min-width:390px}
.brand img{width:210px;height:auto;object-fit:contain}
.brand small{font-size:14px;color:#55645f;font-weight:600;white-space:nowrap}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:24px;margin-left:auto;font-size:14px;font-weight:800}
.nav a{white-space:nowrap}
.header-cta{background:linear-gradient(90deg,var(--orange2),var(--orange));color:#fff;padding:13px 22px;border-radius:999px;box-shadow:0 6px 16px rgba(255,104,26,.22)}

/* hero */
.hero{position:relative;min-height:640px;overflow:hidden;background:#d9f2ff}
.hero > picture{position:absolute;inset:0;display:block;line-height:0}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:blur(5px) saturate(1.06);transform:scale(1.07);transform-origin:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.86) 30%,rgba(255,255,255,.42) 58%,rgba(255,255,255,.26) 100%)}
.hero-inner{position:relative;z-index:3;min-height:640px;display:flex;align-items:center}
/* コピーは左固定をやめ、人物の占める右側を除いた領域の中央に置く（2026-09-14 本人指示）。
   人物の枠幅は FVの高さ×(484/700) で決まるため、避ける幅もそれに合わせて 400px を確保している。 */
.hero-copy{width:calc(100% - 400px);padding:30px 0 26px;text-align:center}
.hero-note{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;color:var(--green);font-size:31px;line-height:1.4;transform:rotate(-4deg);transform-origin:left center;margin-bottom:22px;letter-spacing:.06em}
.hero .hero-catch{font-size:clamp(38px,4.3vw,55px);line-height:1.22;margin:0 0 26px;font-weight:900;letter-spacing:.01em}
.hero .hero-catch .green{color:var(--green)}
/* ===== FVキャッチコピー（2026-09-16 HTML組みに変更）=====
   画像で作っていたものをテキストに戻した。構造は3行:
   1行目と3行目＝濃い墨色＋skew、2行目＝緑の帯に白抜き。
   全体をわずかに回転させて前傾を出す。文字サイズは1箇所(.fv-catch の font-size)で決まり、
   各行は em で比率指定しているので、そこだけ変えれば全体が拡縮する。 */
.fv-catch{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  font-weight:900;font-size:52px;line-height:1;letter-spacing:-.04em;
  width:fit-content;margin:0 auto 18px;
  transform:rotate(-3.5deg);transform-origin:left center}
.fv-catch .l{display:block;white-space:nowrap;position:relative;z-index:2;
  color:#10261a;transform:skewX(-7deg);filter:drop-shadow(2px 4px 3px rgba(0,0,0,.22))}
.fv-catch .l3{margin:calc(-.19em + 10px) 0 0 1.8em}
.fv-catch .l2{position:relative;z-index:1;display:inline-block;
  margin:calc(.04em + 10px) 0 0 -.15em;padding:.13em .21em .16em;
  color:#fff;font-size:1.17em;transform:skewX(-10deg);
  background:linear-gradient(100deg,#0c8a35 0%,#2eae3d 55%,#6bd04a 100%);
  filter:drop-shadow(2px 4px 3px rgba(0,0,0,.2))}
.fv-catch .l2 span{display:inline-block;transform:skewX(3deg)}
/* 「も、」「も」は小さく詰める。等幅のまま置くと間延びする */
.fv-catch .sm{font-size:.74em;letter-spacing:-.12em;margin:0 -.04em}
.hero-h1{font-size:16px;line-height:1.6;font-weight:700;letter-spacing:.02em;color:#2f3a33;margin:-10px 0 22px;word-break:keep-all}
/* 実績バッジ（本人作成の1枚画像・2026-09-16差し替え） */
.kc-marks-img{display:block;width:88%;max-width:560px;height:auto;margin:0 auto 12px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
.cta-wrap{position:relative;display:inline-block}
.tiny-pill{position:absolute;left:50%;top:-16px;transform:translateX(-50%);z-index:2;background:#fff;color:var(--text);border:2px solid var(--orange);border-radius:999px;padding:4px 20px;font-size:14px;font-weight:900;white-space:nowrap}
.cta-main{min-width:420px;display:flex;align-items:center;justify-content:center;gap:30px;background:linear-gradient(90deg,var(--orange2),var(--orange));color:#fff;border-radius:999px;padding:22px 30px;font-size:20px;font-weight:900;box-shadow:0 12px 28px rgba(255,104,26,.25)}
.cta-main .arrow{font-size:25px;font-weight:400;line-height:1}


/* strengths */
.strengths{background:#fff;padding:var(--sec-pt) 0 var(--sec-pb)}
.strengths .section-title{margin-bottom:34px}
.strength-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:70px;text-align:center}
.strength-item .icon-wrap{margin:0 auto 18px}
.strength-item h3{font-size:22px;line-height:1.5;margin:0 0 12px;color:var(--green-dark);font-weight:900}
.strength-item p{font-size:14px;color:#33443e;margin:0;line-height:1.9}

/* worries */
.worries{position:relative;background:linear-gradient(180deg,#f1f9ef 0%,#f7fbef 100%);padding:var(--sec-pt) 0 var(--sec-pb);overflow:hidden}

.worry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.worry-card{background:rgba(255,255,255,.96);border-radius:10px;padding:18px 14px 20px;text-align:center;box-shadow:0 2px 8px rgba(0,77,39,.03)}
.worry-card .icon-wrap{margin:0 auto 10px}
.worry-card p{margin:0;font-size:15px;line-height:1.55;font-weight:800}
/* 下向きの三角（2026-09-14 本人指定）。
   当初は角丸のために「正方形を45度回して overflow:hidden で切る」方式にしていたが、
   角丸をやめた（2026-09-15）ので clip-path で正確に描く。
   旧方式は回転後の菱形の下の頂点（中心から36.75px）が枠の高さ34pxを超えて
   2.75px 切れており、先端が潰れて見えていた。 */
.down-mark{width:72px;height:36px;margin:24px auto 10px;
  background:var(--green);clip-path:polygon(0 0,100% 0,50% 100%)}
.solution{text-align:center;font-size:24px;font-weight:900;margin-top:4px;line-height:1.7}
.solution strong{font-size:29px;color:var(--green)}
.solution em{font-style:normal;color:var(--orange)}
.solution i{font-style:normal;color:var(--text)} /* 「が」だけ黒（2026-09-14 本人指定） */

/* area strength */
/* 見出しを持たず、前のセクションの結び（そのお悩み〜）を受ける区画なので上だけ詰める */
.area-section{position:relative;background:#f7fbf4;padding:8px 0 var(--sec-pb);overflow:hidden}
.area-inner{display:grid;grid-template-columns:38% 37% 25%;align-items:center;background:#fff;min-height:320px;border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.015)}
.area-photo{height:320px;width:100%;object-fit:cover}
.area-copy{padding:28px 34px}
.eyebrow{font-size:14px;color:#53a36d;font-weight:800;letter-spacing:.08em;margin-bottom:8px}
.area-copy h2{font-size:30px;line-height:1.35;color:var(--green-dark);margin:0 0 16px;font-weight:900}
.area-copy p{font-size:14px;margin:0 0 21px;line-height:1.9;color:#33443e}
.green-btn{display:flex;align-items:center;justify-content:center;gap:20px;color:#fff;background:linear-gradient(90deg,#149f4b,#0b8f43);border-radius:999px;padding:14px 24px;font-weight:900;font-size:15px;box-shadow:0 7px 18px rgba(0,126,60,.2)}
.area-map{padding:24px 18px 16px}
.area-map img{width:100%;height:260px;object-fit:contain}

/* jobs */










/* cases */
.cases{padding:var(--sec-pt) 0 var(--sec-pb);background:linear-gradient(180deg,#f4fbf2,#f8fcf6)}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case-card{background:#fff;border-radius:10px;padding:18px 20px;display:grid;grid-template-columns:85px 1fr;gap:16px;align-items:center;box-shadow:0 6px 16px rgba(0,78,39,.04)}
.case-card img{width:80px;height:80px;object-fit:cover;border-radius:50%;background:var(--green-soft)}
.case-info .meta{font-size:14px;font-weight:900;margin-bottom:2px}
.salary{font-size:15px;font-weight:900;line-height:1.4;margin-bottom:7px}
.salary .to{color:#56655f;font-weight:600;margin:0 3px}
.salary .up{color:var(--orange);font-size:24px}
.case-info p{font-size:14px;color:#4c5c57;margin:0;line-height:1.55}


/* market CTA */
.market{position:relative;background:linear-gradient(135deg,#eefaea 0%,#e7f8df 100%);padding:var(--sec-pt) 0 var(--sec-pb);overflow:hidden}
.market-inner{text-align:center;position:relative;z-index:2}
.market small{display:block;font-size:16px;font-weight:800;margin-bottom:8px}
.market h2{font-size:32px;line-height:1.35;margin:0 0 28px;font-weight:900;letter-spacing:.02em}
.market h2 span{color:var(--green)}
.market .hand{position:absolute;right:2%;bottom:6px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;color:var(--green);font-size:23px;line-height:1.5;transform:rotate(-7deg);text-align:left}

/* flow */
.flow{padding:var(--sec-pt) 0 var(--sec-pb);background:#fff}

.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px;position:relative}
.flow-item{position:relative;text-align:center}
.flow-item:not(:last-child)::after{content:"›";position:absolute;right:-30px;top:77px;color:#2fa766;font-size:36px;font-weight:300}
.step-label{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:17px;font-weight:900;font-size:14px}
.step-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-size:14px;flex:0 0 32px}
.flow-item .icon-wrap{margin:0 auto 12px}

.flow-item h3{font-size:15px;margin:0 0 9px}


/* responsive */
@media(max-width:920px){
  .site-header{height:auto;padding:12px 0}.brand{min-width:0}.brand small,.nav a:not(.header-cta){display:none}.brand img{width:175px}.header-cta{padding:10px 16px;font-size:14px}
  .hero{min-height:610px}.hero-inner{min-height:610px}.hero-copy{width:calc(100% - 330px)}.cta-main{min-width:350px}
  /* 681〜920pxでは4カラムのままカードが細くなり「正当に評価してほしい」が折れていたので、
     この帯から2カラムにして本文も14pxへ落とす（スマホと同じ扱い） */
  .worry-grid{grid-template-columns:1fr 1fr}
  .worry-card p{font-size:14px}
  .strength-grid{gap:28px}.area-inner{grid-template-columns:1fr 1fr}.area-map{display:none}.case-card{grid-template-columns:70px 1fr;padding:16px}.case-card img{width:68px;height:68px}.market .hand{display:none}
}
@media(max-width:680px){
  :root{--sec-pt:40px;--sec-pb:48px}
  .container{width:min(100% - 28px,520px)}
    /* スマホFV（2026-09-15 ビルドジョブのSP版を参考に再構成）
     以前は「コピーが上・人物が下」の縦積みで、人物が小さく飾りになっていた。
     参考は人物をFV全面の背景として置き、その上にコピーを左寄せで重ねる構成。
     可読性はコピー側に敷く縦グラデの白ウォッシュ（.hero::after）で確保する。 */
  /* 2026-09-15: FVを500pxまで圧縮し、コピーの「横」に人物を置く2カラム構成へ。
     縦積みをやめたぶん高さを稼げるが、375px幅では横幅の取り合いになるため
     見出しは24pxまで落としている（本人了承済み：コピーは適宜調整可）。
     ウォッシュは縦グラデ→横グラデに変更（左のコピー側だけ白く抜く）。 */
  /* 2026-09-15: スマホは人物込みの1枚画像 fv_sp.jpg に切り替え。
     画像は750x1000（=375x500の枠に2倍密度でぴったり）なので、ぼかし・拡大はかけずそのまま敷く。
     人物の左端が画像の約43%にあるため、コピー欄は左45%しか取れない。
     そのぶん見出しは4行に割って文字サイズ（26px）を確保している（markup側の <br class="only-sp">）。 */
  .hero{min-height:455px}
  /* .has-js .hero-bg のズームアニメ（クラス2）に勝つため、こちらもクラス2で書く。
     メディアクエリは詳細度を上げないので `.hero-bg` だけでは打ち消せない（FAQで同じ事故を起こした）。 */
  .hero-bg,.has-js .hero-bg{filter:none;transform:none;animation:none;object-position:center}
  /* ウォッシュは2層。横1枚で右まで伸ばすと人物の顔（画像の x64〜88% / y15〜42%）に白がかかるため、
     ①横グラデは顔の手前（60%）で0にし、②下半分だけ縦グラデで白を足してバッジの可読性を確保する。
     こうすると白がかかるのは胴体（作業着＝もともと明るい）だけで、顔は素のまま残る。（2026-09-15 本人指摘） */
  .hero::after{background:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 44%,rgba(255,255,255,.42) 62%,rgba(255,255,255,.62) 78%,rgba(255,255,255,.62) 100%),
    linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 34%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 60%)}
  .hero-inner{min-height:455px;align-items:center}
  /* 2026-09-15: コピーは人物の「体」にかぶってよい（本人指示）。顔にさえかからなければOK。
     見出し40px・4行で、最長行「キャリアへ。」が240px＝顔の手前で止まる想定。 */
  /* バッジ（リーフ＋ラベル＋数値）は最低でも290px必要なので、スマホはコピー欄を92%まで広げる。
     見出し・リード文は明示的に改行しているため、広げても行が変わらない。 */
  .hero-copy{width:92%;padding:0;text-align:left}
  /* 強調語が1.42倍になるぶん、スマホは基準を下げないと「妥協しな／い」と割れる（2026-09-15） */
  .hero .hero-catch{font-size:33px;line-height:1.3;margin-bottom:18px}
  /* スマホは女性の顔にかからない幅に収める（3行目の字下げも浅くする） */
  .fv-catch{font-size:36px;margin:0 0 16px}
  .fv-catch .l3{margin-left:.7em}
  .hero-h1{font-size:14px;line-height:1.55;margin:-8px 0 16px}
  /* リーフは上に詰まって見えるのでサブコピーとの間を空ける。
     その分だけ背景(.hero)の高さを500→470pxに削って全体は縦に伸ばさない。 */
  .kc-marks-img{width:100%;max-width:100%;margin:32px 0 8px}
    /* 人物は1枚画像に含まれているので重ねない */
  .hero-person{display:none}
    .cta-main{min-width:0;width:100%;font-size:18px}
  .cta-wrap{display:block}
  /* 2カラムのお悩みカードは「正当に評価してほしい」が枠を1pxだけ超えて「い」が落ちていた。
     paddingを詰めた上で本文を14px（社内の下限）にして確実に1行へ収める。 */
  .worry-card{padding:18px 8px 20px}
  .worry-card p{font-size:14px}
  .strength-grid,.worry-grid,.case-grid,.flow-grid{grid-template-columns:1fr}.strength-grid{gap:36px}.worry-grid{grid-template-columns:1fr 1fr}.area-inner{grid-template-columns:1fr}.area-photo{height:250px}.area-copy{padding:28px 24px}.area-map{display:block;padding:8px 25px 22px}.area-map img{height:220px}.case-card{grid-template-columns:82px 1fr}.flow-grid{gap:28px}.flow-item:not(:last-child)::after{content:"⌄";right:auto;left:50%;top:auto;bottom:-30px;transform:translateX(-50%)}.market h2{font-size:27px}.section-title,.market h2{font-size:27px}
}

/* ===== 以下は 2026-09-14 の移植時にWP版へ追加した区画 =====
   新デザイン（draft1）に無かった FAQ / クロージング / フッター / skip-link を
   旧版から引き継ぎ、新デザインの言語（白地＋緑・1120pxコンテナ）で作り直したもの。
   スマホの最低フォントは14px（社内ルール）。 */

.skip-link{position:fixed;top:8px;left:8px;padding:12px 16px;background:#fff;color:var(--green);font-weight:800;font-size:14px;border-radius:8px;box-shadow:var(--shadow);z-index:100;transform:translateY(-200%)}
.skip-link:focus{transform:none}
a:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* faq */
.faq{padding:var(--sec-pt) 0 var(--sec-pb);background:var(--green-soft)}
.faq-list{display:grid;gap:14px;max-width:860px;margin:0 auto}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.faq-list summary{display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:14px;padding:20px 22px;cursor:pointer;font-size:16px;font-weight:800;line-height:1.6;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-q{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:900}
.faq-plus{position:relative;width:18px;height:18px;justify-self:end}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--green);border-radius:2px}
.faq-plus::before{left:0;top:8px;width:18px;height:2px}
.faq-plus::after{left:8px;top:0;width:2px;height:18px;transition:transform .2s}
.faq-list details[open] .faq-plus::after{transform:scaleY(0)}
.faq-answer{padding:0 22px 22px 70px;font-size:15px;line-height:1.85;color:var(--muted)}

/* closing */
.closing{position:relative;padding:var(--sec-pt) 0 var(--sec-pb);overflow:hidden;color:#fff;text-align:center}
.closing-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,106,52,.92),rgba(6,151,68,.86))}
.closing-inner{position:relative;z-index:2}
.closing h2{font-size:32px;line-height:1.35;margin:0 0 14px;font-weight:900;letter-spacing:.02em}
.closing p{font-size:16px;line-height:1.9;margin:0 0 26px;opacity:.94}
.closing .cta-main{background:#fff;color:var(--green);box-shadow:0 12px 24px rgba(0,50,25,.25)}
.closing .tiny-pill{background:var(--orange);color:#fff;border-color:var(--orange)}
.closing-note{font-size:14px;opacity:.88;margin-top:16px}

/* footer */
.site-footer{background:#09251f;color:#fff;padding:52px 0 30px}
.footer-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:30px}
.footer-brand img{width:190px}
.footer-brand p{font-size:14px;margin:12px 0 0;color:#b9cdc4}
.footer-company{color:#dbeae3;font-weight:700}
.footer-company a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(219,234,227,.45)}
.footer-nav{display:flex;flex-wrap:wrap;gap:14px 28px;font-size:14px;font-weight:700}
.footer-nav a{color:#dbeae3}
.footer-cta{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;font-weight:900;font-size:15px;padding:14px 26px;border-radius:999px}
.footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid #1d3d34;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.legal-links{display:flex;gap:22px;font-size:14px}
.legal-links a{color:#b9cdc4}
.copyright{font-size:14px;color:#8fa79d;margin:0}

@media(max-width:680px){
  /* フッター: 左揃えのベタ並びで情報の境目が無く「ごちゃついて」見えていた（2026-09-15 本人指摘）。
     ①ブランド ②メニュー ③CTA ④法務 の4ブロックを罫線と余白で分け、メニューは2列に整える。 */
  .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;
    padding:20px 0;border-top:1px solid #1d3d34;border-bottom:1px solid #1d3d34;width:100%}
  .footer-brand p{margin-top:10px}
  .footer-company{margin-top:14px}
  .faq-list summary{grid-template-columns:30px 1fr 20px;gap:12px;padding:17px 16px;font-size:15px}
  .faq-q{width:30px;height:30px;font-size:14px}
  .faq-answer{padding:0 16px 18px 58px;font-size:14px}
  .closing h2{font-size:27px}
  .closing p{font-size:15px}
  .footer-top{flex-direction:column;gap:22px}
  .footer-cta{width:100%;justify-content:center}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

.footer-wordmark{display:inline-block;font-size:22px;font-weight:900;letter-spacing:.04em;color:#fff}

/* アイコンの薄緑円（2026-09-14・中山さん指定）
   円は画像に焼き込まず必ずCSSで作る。素材PNGは透過の絵柄だけを持つ。
   強み3 / お悩み4 / ご利用の流れ4 の全11箇所で共通。 */
.icon-wrap{width:96px;height:96px;border-radius:50%;background:#EAF5ED;display:flex;align-items:center;justify-content:center}
.icon-wrap img{width:56px;height:56px;object-fit:contain}
@media(max-width:680px){
  /* お悩みは2カラムのままなので少し縮める */
  .worry-card .icon-wrap{width:84px;height:84px}
  .worry-card .icon-wrap img{width:48px;height:48px}
  /* 強み・ご利用の流れは1カラムになり幅が余るので、逆に大きくする（2026-09-14 実機で小さく見えた） */
  .strength-item .icon-wrap,.flow-item .icon-wrap{width:120px;height:120px}
  .strength-item .icon-wrap img,.flow-item .icon-wrap img{width:70px;height:70px}
}

/* FVの人物（2026-09-14 差し替え・2回目）
   素材 fv_person.png は人物のアルファ境界ぴったりに切り出し済み（484x700）なので、
   CSS側での位置補正は不要＝枠に対して100%で置くだけ。
   ※余白付きの素材に戻す場合は、アルファ境界を実測して枠+負オフセットの方式に戻すこと
     （旧実装は _archive_2026-09-14_旧アイコン/ 時代の履歴を意思決定ノート2026-09-14に記載）。 */
/* 下端のマスクフェードは本人指示で廃止＝FVの下辺でスパッと切る。
   中央の空きはコピーの中央寄せで解消したので、人物はコンテナ右端基準に戻している。 */
.hero-person{position:absolute;bottom:0;right:max(18px,calc((100vw - 1120px)/2));z-index:2;
  height:100%;width:auto;aspect-ratio:484/700;overflow:hidden;pointer-events:none}
/* 画像はCSS背景で持つ（display:none時に取得させないため）。PC幅でのみ読み込ませる。 */
@media(min-width:681px){
  .hero-person{background:url("assets/fv_person.png") no-repeat bottom center/contain}
}
@media(max-width:920px){
  .hero-person{height:96%;right:8px}
}
@media(max-width:680px){
  /* スマホは縦積み。コピーが上、人物は右下に置いて重ならないようにする */

}

/* ===== アニメーション（2026-09-14 追加）=====
   方針: 依存ライブラリなし。レイアウトを動かすプロパティ（width/height/top等）は使わず
   transform と opacity だけを動かす＝CLSを起こさない。
   初期状態は `html.has-js` が付いている時だけ適用する（JSが動かない環境では全部見えたまま）。
   `prefers-reduced-motion: reduce` の人には一切動かさない（このファイル末尾で全無効化）。 */

/* --- FVの入場 --- */
@keyframes fvUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fvPerson{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fvZoom{from{transform:scale(1.07)}to{transform:scale(1.14)}}
.has-js .hero .hero-catch,
.has-js .fv-catch,
.has-js .hero-h1,
.has-js .kc-marks-img,.has-js .kc-marks,
.has-js .hero .cta-wrap{animation:fvUp .75s cubic-bezier(.22,.8,.3,1) both}
.has-js .hero .hero-catch,.has-js .fv-catch{animation-delay:.05s}
/* ★fvUp は to{transform:none} なので、静的に当てた rotate がアニメ終了時に消える。
   傾きはキーフレーム側に持たせた専用アニメで当てる（skewのときと同じ対処）。 */
@keyframes fvUpRot{from{opacity:0;transform:translateY(20px) rotate(-3.5deg)}
  to{opacity:1;transform:rotate(-3.5deg)}}
.has-js .fv-catch{animation-name:fvUpRot}
.has-js .hero-h1{animation-delay:.14s}
.has-js .kc-marks-img,.has-js .kc-marks{animation-delay:.2s}
.has-js .hero .cta-wrap{animation-delay:.34s}
.has-js .hero-person{animation:fvPerson 1.1s cubic-bezier(.22,.8,.3,1) .18s both}
.has-js .hero-bg{animation:fvZoom 20s ease-out both}

/* --- スクロールで浮き上がる（JSが .is-in を付ける）--- */
/* 初期状態（非表示）。:where() で詳細度を0にしているのが要点。
   素の `.has-js .faq-list details` は「クラス2＋要素1」となり、表示用の `.has-js .is-in`（クラス2）より
   強くなってしまい、JSが is-in を付けてもFAQが出てこないバグを起こした（2026-09-14 実際に発生）。
   ここへセレクタを足すときは必ず :where() の内側に書くこと。 */
:where(.has-js) :where(
  .section-title,.strength-item,.worry-card,.solution,
  .area-photo,.area-copy,.area-map,.case-card,
  .market-inner,.flow-item,.faq-list details,.closing-inner
){opacity:0;transform:translateY(22px)}
.has-js .is-in{opacity:1;transform:none;
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.8,.3,1)}
/* グリッド内は左から順に出す */
.has-js .strength-item:nth-child(2),
.has-js .worry-card:nth-child(2),
.has-js .case-card:nth-child(2),
.has-js .flow-item:nth-child(2){transition-delay:.09s}
.has-js .strength-item:nth-child(3),
.has-js .worry-card:nth-child(3),
.has-js .case-card:nth-child(3),
.has-js .flow-item:nth-child(3){transition-delay:.18s}
.has-js .worry-card:nth-child(4),
.has-js .flow-item:nth-child(4){transition-delay:.27s}
.has-js .faq-list details:nth-child(2){transition-delay:.07s}
.has-js .faq-list details:nth-child(3){transition-delay:.14s}
.has-js .faq-list details:nth-child(4){transition-delay:.21s}
.has-js .area-copy{transition-delay:.1s}
.has-js .area-map{transition-delay:.2s}

/* --- ホバー（マウス環境だけ）--- */
@media (hover:hover){
  .icon-wrap{transition:transform .35s cubic-bezier(.22,.8,.3,1)}
  .strength-item:hover .icon-wrap,
  .worry-card:hover .icon-wrap,
  .flow-item:hover .icon-wrap{transform:scale(1.07)}
  .worry-card,.case-card{transition:transform .3s ease,box-shadow .3s ease}
  .worry-card:hover,.case-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,65,35,.14)}
  .cta-main,.green-btn,.header-cta,.footer-cta{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
  .cta-main:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(255,104,26,.34)}
  .closing .cta-main:hover{box-shadow:0 18px 34px rgba(0,50,25,.34)}
  .green-btn:hover,.header-cta:hover,.footer-cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
  .cta-main .arrow{transition:transform .25s ease}
  .cta-main:hover .arrow{transform:translateX(4px)}
  .nav a:not(.header-cta){transition:color .2s ease}
  .nav a:not(.header-cta):hover{color:var(--green)}
}

/* --- FAQの開閉 --- */
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-list details[open] .faq-answer{animation:faqIn .3s ease both}

/* --- 動きを減らす設定の人には一切動かさない --- */
@media (prefers-reduced-motion: reduce){
  .has-js .hero .hero-catch,.has-js .fv-catch,.has-js .hero-h1,.has-js .kc-marks-img,.has-js .kc-marks,.has-js .hero .cta-wrap,
  .has-js .hero-person,.has-js .hero-bg,
  .faq-list details[open] .faq-answer{animation:none}
  .has-js .section-title,.has-js .strength-item,.has-js .worry-card,.has-js .solution,
  .has-js .area-photo,.has-js .area-copy,.has-js .area-map,.has-js .case-card,
  .has-js .market-inner,.has-js .flow-item,.has-js .faq-list details,
  .has-js .closing-inner,
  .has-js .faq-list details.is-in{opacity:1;transform:none;transition:none}
  .has-js .hero-bg{transform:scale(1.07)}
  *{scroll-behavior:auto!important}
}

/* スマホだけで効かせる改行（中央寄せのFVで半端な折り返しを防ぐ） */
.only-sp{display:none}
@media(max-width:680px){.only-sp{display:inline}}

/* ヘッダーの折り返し対策（2026-09-14 本文14px化の副作用）。
   タグラインは文字を大きくしたぶん幅を食うので、中間幅から先に落とす。 */
@media(max-width:1100px){
  .brand small{display:none}
  .nav{gap:18px}
}
/* 1023px以下ではナビのリンクを畳み、CTAだけ残す（14px化で4リンク＋CTAが収まらなくなったため）。
   もとは920px以下で畳んでいたが、960px幅でナビが枠を61px超えていた。 */
@media(max-width:1023px){
  .nav a:not(.header-cta){display:none}
  .brand img{width:190px}
}

/* ===== スマホの追従CTA（2026-09-15 本人提案）=====
   FV内のCTAを畳んで画面下に固定することで、FVを縦に詰めつつCTAを常時表示にする。
   PCでは出さない（PCはFV内とページ中の複数CTAで足りている）。 */
.sp-fixed-cta{display:none}
@media(max-width:680px){
  .sp-fixed-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.93);border-top:1px solid var(--line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .sp-fixed-cta a{display:flex;align-items:center;justify-content:center;gap:10px;
    min-height:54px;border-radius:999px;
    background:linear-gradient(90deg,var(--orange2),var(--orange));color:#fff;
    font-size:17px;font-weight:900;box-shadow:0 8px 20px rgba(255,104,26,.3)}
  .sp-cta-tag{background:rgba(255,255,255,.22);border-radius:6px;padding:3px 9px;font-size:14px;font-weight:900}
  .sp-fixed-cta .arrow{font-weight:400}
  /* 固定バーの下にコンテンツが潜らないよう逃がす */
  body{padding-bottom:86px}
  /* FV内のCTAは畳む（下の固定バーと二重になるため） */
  .hero .cta-wrap{display:none}
}

/* スマホの背景ズーム停止（2026-09-15）
   `.has-js .hero-bg` のアニメ指定はこのファイル後方（アニメーション区画）にあり、
   同じ詳細度ならソース順で後ろが勝つ。よってメディアクエリでの打ち消しは
   アニメ区画より後ろ＝このファイル末尾に置く必要がある。
   スマホは人物込みの1枚画像なので、ズームすると人物ごと拡大されてしまう。 */
@media(max-width:680px){
  .has-js .hero-bg{animation:none;transform:none;filter:none}
}

/* ===== FVの見出しと実績バッジ（2026-09-15 build-job.jp の技法を移植）=====
   移植したのは「技法」だけ: ①明朝体 ②強調語と地の文の2サイズ対比 ③ネガティブトラッキング
   ④わずかなskew ⑤月桂樹で数値を囲む構造。
   持ち込んでいないもの: 参考サイトの色(#ee5d00)・文言・月桂樹の画像（葉はSVGで自作）・実績数値。
   解析メモ: output/04_横断・運用/参考サイト解析/2026-09-15_build-job.jp_FV解析.md */

.hero .hero-catch{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  font-weight:600;letter-spacing:-.05em;line-height:1.28}
.hero .hero-catch .big{font-size:1.42em;line-height:1.1}
@media(min-width:681px){
  /* PCは全体をわずかに前傾させる（参考は-7deg。8deg以上は崩れて見える）。
     ※FVの入場アニメ fvUp が transform を握っており、静的な transform はアニメ終了時に
       打ち消される（animation-fill-mode:both で to{transform:none} が残るため）。
       なので skew はキーフレーム側に持たせた専用アニメで当てる。 */
  .hero .hero-catch{transform:skewX(-6deg);transform-origin:left center}
  .has-js .hero .hero-catch{animation-name:fvUpSkew}
}
@keyframes fvUpSkew{
  from{opacity:0;transform:translateY(20px) skewX(-6deg)}
  to{opacity:1;transform:skewX(-6deg)}
}

/* 実績バッジ（草冠）。リーフは新卒LPの自社素材（leaf-1=左 / leaf-2=右）を流用。
   色は参考画像に合わせたゴールド系。ただし当FVは明るい背景なので、参考（濃地に明るい金）の
   ままでは数字が沈む。リーフは明るい金のまま・数字は濃い金にして可読性を確保している。 */
.kc-marks{display:flex;flex-direction:column;align-items:center;gap:2px;list-style:none;margin:0 0 8px;padding:0}
.kc-marks li{display:flex;align-items:center;gap:6px}
.kc-leaf{width:42px;height:auto;flex:0 0 42px}
.kc-body{display:flex;align-items:center;gap:12px;min-width:236px;justify-content:center}
.kc-label{font-size:14px;font-weight:800;color:var(--muted);text-align:center;line-height:1.35;white-space:nowrap;flex:0 0 auto}
.kc-value{display:flex;align-items:baseline;gap:2px;color:#8a6a12;white-space:nowrap}
.kc-pre{font-size:14px;font-weight:800;align-self:center}
.kc-value strong{font-size:36px;font-weight:900;letter-spacing:-.02em;line-height:1}
.kc-unit{position:relative;font-size:17px;font-weight:900;padding-right:13px}
.kc-note{position:absolute;top:-4px;right:0;font-size:14px;font-weight:600;color:var(--muted);
  transform:scale(.68);transform-origin:right top}
/* 注記はFVの外（FV直下）に敷く。FVの中に置くと6行になってCTAを押し出すため。 */
.kc-notes-band{background:#fff;padding:12px 0 14px}
.kc-notes-band .kc-notes{margin:0;text-align:center}
.kc-notes{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 14px;text-align:center;
  transform:scale(.84)}

@media(max-width:680px){
  .kc-marks{align-items:flex-start;gap:0;margin-bottom:2px}
  .kc-leaf{width:28px;flex:0 0 28px}
  .kc-body{gap:8px;min-width:0}
  .kc-value strong{font-size:26px}
  .kc-unit{font-size:14px;padding-right:12px}
  .kc-notes{text-align:left}
}

}

/* タブレット幅はコピー欄が狭いので一段落とす */
@media (min-width:681px) and (max-width:920px){ .fv-catch{font-size:40px} }