/* v09480 業種LP(/unso/・/kojo/・/fukushoku-hantei/)。/aichi-lp/ の部品(aichi-lp-page.css)に、業種LPだけの節を足す。
   見本: repo output/gyoshu_lp/raw_mock.png(設計図 data/review_llmo_lp/design/gyoshu_lp_design.json から生成) */

/* 節の地の色。aichi-lp-page.css の「偶数番目を水色」は節の数が違うとずれる(v09479 で最後の案内が水色に白文字になった)ので、
   業種LPでは節ごとに色を決める。詳細度は aichi 側(1,2,2)より上げる。 */
/* v09481: aichi-lp-page.css は gyoshu-lp.css より後に読まれるので、:nth-of-type(n) で詳細度を1つ上げる(v09480 の本番で「線引き」が水色になった) */
body.sampo-gyoshu-lp-page.sampo-aichi-lp-page #a403 > section:nth-of-type(n) { background:#fff; }
body.sampo-gyoshu-lp-page.sampo-aichi-lp-page #a403 > section.a403-tinted:nth-of-type(n) { background:var(--aichi-pale); }
body.sampo-gyoshu-lp-page.sampo-aichi-lp-page #a403 > section.gy-band:nth-of-type(n),
body.sampo-gyoshu-lp-page.sampo-aichi-lp-page #a403 > section.aichi-cta:nth-of-type(n) { background:var(--aichi-navy); color:#fff; }
body.sampo-gyoshu-lp-page.sampo-aichi-lp-page #a403 > section.gy-nayami { padding:0 !important; }

/* 数字の帯(紺) */
#a403 .gy-band { text-align:center; }
#a403 .gy-band .gy-band-eyebrow { margin:0 0 14px; color:#9ec5ff; font-size:14px; font-weight:700; letter-spacing:.12em; }
body.sampo-gyoshu-lp-page #a403 > section.gy-band h2 { color:#fff; margin-bottom:40px; }
#a403 .gy-band-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; text-align:center; }
#a403 .gy-stat { padding:30px 22px 26px; border-radius:10px; background:#fff; color:var(--aichi-navy); box-shadow:0 10px 30px rgba(0,0,0,.18); }
#a403 .gy-stat-num { margin:0 0 10px; font-family:var(--aichi-mincho); line-height:1.1; }
#a403 .gy-stat-num strong { font-size:clamp(46px,5vw,64px); font-weight:700; letter-spacing:.01em; }
#a403 .gy-stat-num span { margin-left:4px; font-size:22px; font-weight:700; }
#a403 .gy-stat-label { margin:0; font-size:15px; font-weight:700; line-height:1.7; }
#a403 .gy-stat-note { margin:8px 0 0; color:#5b6b80; font-size:13px; line-height:1.6; }
#a403 .gy-band-text { max-width:880px; margin:36px auto 0; color:#e6eefb; font-size:16px; line-height:1.95; text-align:left; }
#a403 .gy-band-source { max-width:880px; margin:14px auto 0; color:#a9bcd8; font-size:12px; line-height:1.7; text-align:left; }
/* 年の並び(工場) */
#a403 .gy-band--timeline .gy-stat-num strong { font-size:clamp(42px,4.4vw,56px); }
#a403 .gy-band--timeline .gy-stat-num span { font-size:18px; }
#a403 .gy-band--timeline .gy-stat { border-top:6px solid var(--aichi-cta); }
/* ≠ の比べ(復職判定) */
#a403 .gy-band--compare .gy-band-grid { grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); gap:14px; align-items:center; }
#a403 .gy-band--compare .gy-stat { height:100%; display:flex; flex-direction:column; justify-content:center; }
#a403 .gy-band--compare .gy-stat-num strong { font-size:clamp(22px,2.2vw,27px); }
#a403 .gy-band--compare .gy-stat:last-child { outline:4px solid #f6b26b; outline-offset:-4px; }
#a403 .gy-neq { color:#f6b26b; font-size:40px; font-weight:700; line-height:1; }

/* 産業医の線引き */
#a403 .gy-line-list { display:grid; gap:14px; margin:0; padding:0; list-style:none; counter-reset:none; }
#a403 .gy-line { display:grid; grid-template-columns:minmax(0,5fr) 44px minmax(0,7fr); align-items:center; gap:0 18px; padding:20px 26px; border:1px solid var(--aichi-rule); border-left:8px solid var(--gy-tone); border-radius:8px; background:#fff; box-shadow:0 4px 14px rgba(11,42,91,.06); }
#a403 .gy-line--stop { --gy-tone:#c62828; --gy-tone-bg:#fdecea; }
#a403 .gy-line--cond { --gy-tone:#b26a00; --gy-tone-bg:#fff4dc; }
#a403 .gy-line--info { --gy-tone:var(--aichi-teal); --gy-tone-bg:#e6f0fb; }
#a403 .gy-line-scene { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
/* 場面のワンポイントのイラスト(v09483・角田「イラストとか写真とかいらない？」)。左に置き、ラベルと場面をその右に */
#a403 .gy-line-scene:has(.gy-line-icon) { display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows:auto auto; column-gap:18px; row-gap:8px; align-items:center; }
#a403 .gy-line-icon { grid-row:1 / span 2; width:96px; height:96px; object-fit:contain; }
#a403 .gy-line-scene:has(.gy-line-icon) .gy-line-tag { justify-self:start; align-self:end; }
#a403 .gy-line-scene:has(.gy-line-icon) strong { align-self:start; }
#a403 .gy-line-tag { display:inline-block; padding:4px 12px; border-radius:4px; background:var(--gy-tone); color:#fff; font-size:13px; font-weight:700; letter-spacing:.05em; line-height:1.5; }
#a403 .gy-line-scene strong { font-size:18px; font-weight:700; line-height:1.6; }
#a403 .gy-line-arrow { position:relative; height:2px; background:var(--gy-tone); }
#a403 .gy-line-arrow::after { content:""; position:absolute; right:-2px; top:-6px; border:7px solid transparent; border-left:11px solid var(--gy-tone); border-right:0; }
#a403 .gy-line-judge { padding:14px 18px; border-radius:6px; background:var(--gy-tone-bg); }
#a403 .gy-line-judge p { margin:0; font-size:16px; font-weight:600; line-height:1.8; }
#a403 .gy-line-judge p.gy-line-who { margin-bottom:4px; color:var(--gy-tone); font-size:12px; font-weight:700; letter-spacing:.1em; }
#a403 .gy-line-judge p.gy-line-note { margin-top:8px; color:#43546b; font-size:14px; font-weight:400; line-height:1.75; }

/* 最初の3か月・巡視・1件の中身(番号の流れ) */
#a403 .gy-steps { position:relative; display:grid; grid-template-columns:repeat(var(--gy-steps,4),minmax(0,1fr)); gap:22px; margin:8px 0 0; padding:0; list-style:none; }
#a403 .gy-steps::before { content:""; position:absolute; top:28px; left:calc(50% / var(--gy-steps,4)); right:calc(50% / var(--gy-steps,4)); height:2px; background:var(--aichi-teal); opacity:.35; }
#a403 .gy-steps li { position:relative; text-align:center; }
#a403 .gy-step-num { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:16px; border-radius:50%; background:var(--aichi-navy); color:#fff; font-family:var(--aichi-mincho); font-size:26px; font-weight:700; box-shadow:0 0 0 6px var(--aichi-pale); }
#a403 .gy-steps h3 { margin:0 0 8px; font-size:18px; }
#a403 .gy-steps p { margin:0; font-size:15px; line-height:1.8; color:#2c3e57; }
#a403 .gy-start-note { margin:40px 0 0; padding:18px 22px; border-radius:8px; background:#fff; border:1px solid var(--aichi-rule); font-size:15px; line-height:1.9; }

/* 料金: 必要なことだけ頼む */
#a403 .gy-spots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
#a403 .gy-spot { padding:22px 24px; border:1px solid var(--aichi-rule); border-radius:8px; background:#fff; }
#a403 .gy-spot h4 { margin:0 0 6px; font-size:16px; }
#a403 .gy-spot-price { margin:0 0 8px; color:var(--aichi-navy); font-family:var(--aichi-mincho); font-size:32px; font-weight:700; line-height:1.3; }
#a403 .gy-spot-price small { margin-left:4px; font-family:"Noto Sans JP",sans-serif; font-size:13px; font-weight:400; }
#a403 .gy-spot p { margin:0 0 10px; font-size:15px; line-height:1.8; }
#a403 .gy-supports { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
#a403 .gy-price-action { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* くわしい解説(WP の本文)。#a403 の初期化(リスト記号なし・h2 明朝大)を本文だけ上書き。 */
#a403 .gy-kaisetsu > .a403-wrap > h2 { margin-bottom:12px; }
#a403 .a403-answer { max-width:860px; margin-inline:auto; font-size:16px; line-height:1.95; color:var(--aichi-navy); }
#a403 .gy-kaisetsu .a403-answer { margin-left:0; }
#a403 > section.gy-kaisetsu .a403-answer > h2 { font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif; font-weight:700; font-size:clamp(20px,2.2vw,24px); line-height:1.55; margin:48px 0 16px; padding:0 0 0 14px; border-left:6px solid var(--aichi-teal); }
#a403 > section.gy-kaisetsu .a403-answer > h3 { font-size:18px; font-weight:700; margin:30px 0 10px; }
#a403 .a403-answer > p { margin:0 0 1.15em; }
#a403 .a403-answer strong { background:linear-gradient(transparent 62%, #fff3b0 62%); }
#a403 .a403-answer a { color:var(--aichi-teal); text-decoration:underline; text-underline-offset:3px; }
#a403 .a403-answer > ul, #a403 .a403-answer > ol { margin:0 0 1.5em; padding:0; list-style:none; }
#a403 .a403-answer > ul > li, #a403 .a403-answer > ol > li { position:relative; margin:.45em 0; }
#a403 .a403-answer .is-style-check_list > li { padding-left:1.9em; }
#a403 .a403-answer .is-style-check_list > li::before { content:""; position:absolute; left:.35em; top:.5em; width:.45em; height:.85em; border:solid #1f8a5b; border-width:0 3px 3px 0; transform:rotate(45deg); }
#a403 .a403-answer .is-style-num_circle_list { counter-reset:gl; }
#a403 .a403-answer .is-style-num_circle_list > li { padding-left:2.5em; counter-increment:gl; }
#a403 .a403-answer .is-style-num_circle_list > li::before { content:counter(gl); position:absolute; left:0; top:.2em; width:1.75em; height:1.75em; border-radius:50%; background:var(--aichi-teal); color:#fff; font-weight:700; font-size:.88em; line-height:1.75em; text-align:center; }
#a403 .a403-answer .is-style-balloon_box2 { margin:0 0 1.6em; padding:18px 22px; border:2px solid var(--aichi-rule); border-radius:14px; background:#fff; font-weight:700; }
#a403 .a403-answer .wp-block-table { margin:0 0 1.6em; overflow-x:auto; }
#a403 .a403-answer table { width:100%; min-width:560px; border-collapse:collapse; font-size:15px; line-height:1.7; background:#fff; }
#a403 .a403-answer th, #a403 .a403-answer td { border:1px solid var(--aichi-rule); padding:10px 12px; text-align:left; vertical-align:top; font-size:15px; }
#a403 .a403-answer .wp-block-buttons { display:none; }

/* 事例が1社のとき: 写真が横いっぱいに大きくならないよう、写真と文を横に並べる */
#a403 .a403-cases.gy-cases-1 { grid-template-columns:1fr; }
#a403 .gy-cases-1 .a403-case { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:40px; align-items:center; }
#a403 .gy-cases-1 .a403-case-photo { aspect-ratio:3/2; height:auto; }

/* くわしい解説は長いので、たたんで「続きを読む」(JS がないときは全部出る) */
#a403 .gy-fold.is-folded { position:relative; max-height:1100px; overflow:hidden; }
#a403 .gy-fold.is-folded::after { content:""; position:absolute; left:0; right:0; bottom:0; height:220px; background:linear-gradient(rgba(255,255,255,0), #fff 85%); }
#a403 .gy-fold-action { max-width:860px; margin:8px 0 0; text-align:center; }

/* お悩みの下のまとめ: 業種LPは一文が長めなので、/aichi-lp/ より少し小さく(PC の1行目は折り返さない決まりのため) */
@media (min-width:769px) { body.sampo-gyoshu-lp-page #a403 .a403-intro-issue .scintro-sec3__message p:first-child { font-size:clamp(28px,3vw,40px); } }
@media (max-width:768px) {
  body.sampo-gyoshu-lp-page #a403 .a403-intro-issue .scintro-sec3__bottom { grid-template-columns:minmax(0,1fr); }
  body.sampo-gyoshu-lp-page #a403 .a403-intro-issue .scintro-sec3__message { width:100%; max-width:100%; }
  body.sampo-gyoshu-lp-page #a403 .a403-intro-issue .scintro-sec3__message span { word-break:normal; overflow-wrap:anywhere; }
  body.sampo-gyoshu-lp-page #a403 .a403-intro-issue .scintro-sec3__message p { font-size:22px; }
}

/* 最初の画面(PC): 写真を右の58%だけに置き、左端をぼかして文字の地になじませる。全面に敷くと人物が見出しの裏に来る(v09483・角田「人間もうちょっと右側がよくない？」) */
@media (min-width:761px) {
  body.sampo-gyoshu-lp-page #a403 .a403-hero-background::after { display:none !important; }
  body.sampo-gyoshu-lp-page #a403 .a403-hero-background img { position:absolute; top:0; right:0; left:auto; width:58%; height:100%; object-fit:cover; object-position:center 30%; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 38%); mask-image:linear-gradient(90deg, transparent 0, #000 38%); }
}
@media (max-width:900px) {
  #a403 .gy-band-grid { grid-template-columns:1fr; gap:14px; }
  #a403 .gy-band--compare .gy-band-grid { grid-template-columns:1fr; gap:6px; }
  #a403 .gy-neq { font-size:30px; }
  #a403 .gy-line { grid-template-columns:1fr; gap:12px; padding:18px; }
  #a403 .gy-line-arrow { width:2px; height:20px; margin-left:20px; }
  #a403 .gy-line-arrow::after { right:auto; left:-6px; top:auto; bottom:-4px; border:7px solid transparent; border-top:11px solid var(--gy-tone); border-bottom:0; }
  #a403 .gy-steps { grid-template-columns:1fr; gap:18px; }
  #a403 .gy-steps::before { top:28px; bottom:28px; left:27px; right:auto; width:2px; height:auto; }
  #a403 .gy-steps li { display:grid; grid-template-columns:56px 1fr; gap:0 16px; text-align:left; }
  #a403 .gy-step-num { grid-row:span 2; margin:0; }
  #a403 .gy-steps h3 { margin-top:6px; }
  #a403 .gy-spots { grid-template-columns:1fr; }
  #a403 .gy-cases-1 .a403-case { grid-template-columns:1fr; gap:0; }
}
@media (max-width:760px) {
  #a403 .gy-stat { padding:22px 18px; }
  #a403 .gy-line-scene strong { font-size:17px; }
  #a403 .gy-line-scene:has(.gy-line-icon) { grid-template-columns:64px minmax(0,1fr); column-gap:14px; }
  #a403 .gy-line-icon { width:64px; height:64px; }
  #a403 .a403-answer { font-size:15.5px; }
}