/* サービスの個別ページの組み。2026-10-20 から。最初のページは社外IT・AI担当（/it-ai-staff）。
 * ワイヤー wireframe_service_ai-staff_v1.html の CSS を、サービスページ共通の部分（.sv-*）と、このページで足した部分に分けて写した。
 * ほかのサービスページ（ワイヤーはあるが未実装）を作るときも、このファイルを使う。トップの .faq と .abtn は site.css のまま使う。
 * ワイヤーの .memo（注記）はサイトには出さない。 */

.sv-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3.5rem,8vw,6rem);border-top:0}
.sv-crumb{margin:0 0 clamp(1.8rem,4vw,2.6rem);font-size:.78rem;color:var(--ink-faint);max-width:none}
.sv-crumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.sv-crumb a:hover,.sv-crumb a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
.sv-crumb span{margin:0 .6em}
.sv-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sv-head h1{margin:.9rem 0 0;font-size:clamp(1.8rem,4.2vw,2.7rem);line-height:1.4}
.sv-head-txt p{margin:1.5rem 0 0;font-size:.95rem;line-height:2;color:var(--ink-soft);max-width:none}
.sv-fig{margin:0;background:var(--panel);aspect-ratio:3/2;overflow:hidden}
.sv-fig img{display:block;width:100%;height:100%;object-fit:cover}

/* トップほど区切りを大きく取らない。下層ページは読み進めるもの */
.sv-sec{padding:clamp(3.5rem,8vw,6rem) 0}
.sv-sec .sv-for,.sv-sec .sv-steps,.sv-sec .sv-record{margin:clamp(2rem,4vw,2.8rem) 0 0;padding:0;list-style:none}
.sv-for{border-top:1px solid var(--rule-soft)}
.sv-for li{position:relative;padding:1.15rem 0 1.15rem 1.6rem;border-bottom:1px solid var(--rule-soft);font-size:.98rem;line-height:1.8}
.sv-for li::before{content:"";position:absolute;left:.15rem;top:1.85em;width:.55rem;height:2px;background:var(--acc)}

/* 進め方：番号（オレンジ・等幅）と見出し・説明。トップの入口の「3つのこと」と同じ組み */
.sv-steps{counter-reset:none}
.sv-steps li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.4rem;padding:1.5rem 0;border-bottom:1px solid var(--rule-soft)}
.sv-steps li:first-child{border-top:1px solid var(--rule-soft)}
.sv-no{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--acc);padding-top:.3rem}
.sv-steps h3{margin:0;font-size:1.08rem;line-height:1.7}
.sv-steps p{margin:.45rem 0 0;font-size:.92rem;line-height:1.95;color:var(--ink-soft);max-width:44em}

/* 進め方を3つの段に分ける。段は「ご依頼の形と、費用」の3枚と同じ */
.sv-phases{margin-top:clamp(2rem,4vw,2.8rem);display:flex;flex-direction:column;gap:clamp(1.8rem,4vw,2.6rem)}
.sv-phase-name{margin:0;display:flex;align-items:baseline;gap:.9rem;font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--ink);max-width:none}
.sv-phase-name span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--acc)}
.sv-phase .sv-steps{margin-top:.9rem}
.sv-sec-lead{margin:1.4rem 0 0;font-size:.95rem;line-height:2;color:var(--ink-soft);max-width:40em}
.sv-plans{margin-top:clamp(2rem,4vw,2.8rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.sv-plan{display:flex;flex-direction:column;padding:clamp(1.4rem,3vw,1.9rem);background:var(--panel);border-top:2px solid var(--ink)}
.sv-plan:first-child{border-top:3px solid var(--acc)}
.sv-plan-step{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--acc)}
.sv-plan h3{margin:.5rem 0 0;font-size:1.2rem;line-height:1.6}
.sv-plan .sv-plan-name{margin:.3rem 0 0;font-size:.8rem;color:var(--ink)}
.sv-plan > p{margin:.9rem 0 0;font-size:.88rem;line-height:1.9;color:var(--ink-soft);max-width:none}
.sv-plan dl{margin:1.2rem 0 0}
.sv-plan dl div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.6rem;padding:.6rem 0;border-top:1px solid var(--rule)}
.sv-plan dt{font-size:.78rem;color:var(--ink-faint)}
.sv-plan dd{margin:0;font-size:.85rem;line-height:1.7;color:var(--ink)}
.sv-plan .sv-plan-price{margin-top:auto;padding-top:1.2rem;color:var(--ink)}
.sv-plan-price strong{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin-right:.3em}
.sv-notes{margin-top:clamp(2.4rem,5vw,3.4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2rem)}
.sv-notes > div:first-child{border-top:2px solid var(--ink);padding-top:1.2rem}
.sv-notes p{margin:.8rem 0 0;font-size:.9rem;line-height:1.95;color:var(--ink-soft);max-width:none}
.sv-not{padding:clamp(1.3rem,3vw,1.8rem) clamp(1.3rem,3vw,2rem);background:var(--panel)}
.sv-not ul{margin:.8rem 0 0;padding-left:1.3em;font-size:.9rem;line-height:2;color:var(--ink-soft)}


.sv-record li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--rule-soft)}
.sv-record li:first-child{border-top:1px solid var(--rule-soft)}
.sv-date{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--ink-faint);padding-top:.25rem}
.sv-record p{margin:0;font-size:.92rem;line-height:1.95;color:var(--ink-soft);max-width:44em}

/* 相談の入口：無料の診断と、お問い合わせの2つ */
.sv-cta{background:#EAEAEA;border-top:0}
.sv-cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,2rem)}
.sv-cta-box{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(1.6rem,4vw,2.6rem);background:var(--paper)}
.sv-cta-box:first-child{border-top:3px solid var(--acc)}
.sv-cta-box p{margin:1rem 0 1.6rem;font-size:.92rem;line-height:1.95;color:var(--ink-soft);max-width:none}
.sv-cta-box .abtn{margin-top:auto}
.sv-cta .sv-cta-name{margin:0;color:var(--ink)}
.sv-cta-name .en{display:block;font-family:var(--garamond);font-weight:500;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.06em;line-height:1.2}
.sv-cta-name .ja{display:flex;align-items:center;gap:.6rem;margin-top:.45rem;font-family:var(--serif);font-weight:500;font-size:.95rem;color:var(--ink-soft)}
.sv-cta-name .ja-l{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.6vw,1.5rem);line-height:1.5}
.sv-badge{display:inline-block;padding:.4em .7em;background:var(--acc);color:#FFF;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;line-height:1}
.sv-acc{background:var(--acc);border-color:var(--acc);color:#FFF}
.sv-acc:hover,.sv-acc:focus-visible{background:var(--paper);color:var(--acc)}

@media (max-width:834px){
  .sv-head,.sv-plans,.sv-notes,.sv-cta-grid{grid-template-columns:minmax(0,1fr)}
  .sv-fig{order:-1}
}
@media (max-width:640px){
  .sv-steps li{grid-template-columns:2.4rem minmax(0,1fr)}
  .sv-record li{grid-template-columns:minmax(0,1fr);gap:.3rem}
}
/* ---- コーポレートサイト制作・リニューアルで足したもの ---- */
.sv-cons{margin-top:clamp(2rem,4vw,2.8rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.sv-con{padding:clamp(1.3rem,3vw,1.7rem);background:var(--panel);border-top:2px solid var(--acc)}
.sv-con h3{margin:0;font-size:1.05rem;line-height:1.7}
.sv-con p{margin:.7rem 0 0;font-size:.88rem;line-height:1.9;color:var(--ink-soft);max-width:none}
.sv-sec .wcards{margin-top:1.6rem}
.sv-cta-box.sv-cta-main{border-top:3px solid var(--ink)}
.sv-cta-box.sv-cta-main + .sv-cta-box{border-top:3px solid var(--acc)}
.sv-cta-box:first-child:not(.sv-cta-main){border-top:3px solid var(--acc)}
@media (max-width:834px){ .sv-cons{grid-template-columns:minmax(0,1fr)} }
@media (min-width:835px) and (max-width:1100px){ .sv-cons{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ---- コンテンツ企画・制作で足したもの ---- */
.sv-plans-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:56rem}
.sv-only{margin-top:clamp(1.6rem,3vw,2.2rem);max-width:44em}
.sv-only p{margin:1rem 0 0;font-size:.95rem;line-height:2;color:var(--ink-soft);max-width:none}
.sv-only p:first-child{color:var(--ink)}
.sv-only a{color:var(--ink)}
.sv-works{margin-top:clamp(2.4rem,5vw,3.4rem)}
.sv-works:first-of-type{margin-top:clamp(1.6rem,3vw,2.2rem)}
.sv-wlist{margin:1.4rem 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.sv-wlist li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1rem clamp(1.2rem,3vw,2.5rem);
             padding:1.4rem 0;border-bottom:1px solid var(--rule);font-size:.88rem;line-height:1.85;color:var(--ink-soft)}
.sv-wlist b{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--ink)}
@media (max-width:760px){ .sv-wlist li{grid-template-columns:minmax(0,1fr);gap:.4rem} }
.sv-wlist b{display:flex;align-items:flex-start;gap:.7rem}
.sv-ic{flex:none;width:26px;height:26px;margin-top:-.1rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- 社外IT・AI担当で足したもの（2026-10-18） ---- */
.sv-tags{margin:1.4rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.sv-tags li{padding:.35em .8em;border:1px solid var(--rule);font-size:.78rem;color:var(--ink-soft)}
/* サブコピー：地の文より大きく、見出しより小さく（2026-10-19） */
.sv-head-txt .sv-sub{margin:1.2rem 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.7;color:var(--ink)}
.sv-price{margin:1.6rem 0 0;color:var(--ink)}
.sv-price strong{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.6vw,1.8rem);margin-right:.3em}
.sv-price small{font-size:.8rem;color:var(--ink-soft)}
.sv-voices{margin:clamp(2rem,4vw,2.8rem) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.8rem,3vw,2.2rem) clamp(1.2rem,2.4vw,1.6rem)}
.sv-voices li{display:flex;align-items:center;position:relative;padding:clamp(1.6rem,3vw,2rem) clamp(1.5rem,3vw,2rem);background:var(--panel)}
.sv-voices li::after{content:"";position:absolute;left:2rem;bottom:-12px;border-style:solid;border-width:12px 12px 0 0;border-color:var(--panel) transparent transparent transparent}
.sv-voices li::before{content:"\201C";position:absolute;left:.9rem;top:-.85rem;font-family:Georgia,"Times New Roman",serif;font-size:4.2rem;line-height:1;color:var(--ink-faint);pointer-events:none}
.sv-voices p{margin:0;text-indent:-.5em;font-family:var(--serif);font-weight:500;font-size:1.05rem;line-height:1.9;color:var(--ink);max-width:none}
@media (max-width:834px){ .sv-voices{grid-template-columns:minmax(0,1fr)} }
@media (min-width:835px) and (max-width:1100px){ .sv-voices{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sv-whys .sv-con{background:#FFFFFF;border:1px solid var(--rule);text-align:center;padding:clamp(2rem,4vw,2.6rem) clamp(1.4rem,3vw,2rem)}
.sv-whys .sv-con p{text-align:left}
.sv-why-ic{display:block;width:64px;height:64px;margin:0 auto 1.2rem;fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.sv-flow{margin:clamp(2rem,4vw,2.8rem) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sv-flow li{filter:drop-shadow(1px 0 0 var(--rule)) drop-shadow(-1px 0 0 var(--rule)) drop-shadow(0 1px 0 var(--rule)) drop-shadow(0 -1px 0 var(--rule))}
.sv-flow li+li{margin-left:-12px}
.sv-flow-box{height:100%;box-sizing:border-box;padding:clamp(1.5rem,3vw,2rem) 2.4rem clamp(1.6rem,3vw,2.2rem) 1.6rem;background:#FFFFFF;text-align:center;
             clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.sv-flow li+li .sv-flow-box{padding-left:2.6rem;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
.sv-flow .sv-no{display:block;padding:0}
.sv-flow-ic{display:block;width:52px;height:52px;margin:.9rem auto 1rem;fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.sv-flow h3{margin:0;font-size:1.02rem;line-height:1.6}
.sv-flow p{margin:.6rem 0 0;font-size:.86rem;line-height:1.85;color:var(--ink-soft);text-align:left;max-width:none}
@media (max-width:834px){
  .sv-flow{grid-template-columns:minmax(0,1fr)}
  .sv-flow li+li{margin:-10px 0 0}
  .sv-flow-box,.sv-flow li+li .sv-flow-box{padding:1.6rem 1.6rem 2.4rem;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),50% 100%,0 calc(100% - 20px))}
  .sv-flow li+li .sv-flow-box{padding-top:2.6rem;clip-path:polygon(0 0,50% 20px,100% 0,100% calc(100% - 20px),50% 100%,0 calc(100% - 20px))}
}
.pc{max-width:46rem;margin:clamp(2rem,4vw,2.8rem) auto 0;background:#FFFFFF;border:1px solid var(--rule);text-align:center}
.pc-head{padding:1.1rem 1rem 1.2rem;background:var(--ink);color:#FFFFFF}
.pc-label{margin:0;max-width:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--acc)}
.pc-head h3{margin:.3rem 0 0;font-size:1.25rem;line-height:1.5;color:#FFFFFF}
.pc-body{padding:clamp(1.8rem,4vw,2.6rem) clamp(1.2rem,4vw,2.6rem) clamp(2rem,4vw,2.8rem)}
.pc-price{margin:0 auto;max-width:none;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 .25em;color:var(--ink)}
.pc-price strong{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,9vw,5rem);line-height:1;letter-spacing:.02em}
.pc-unit{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,2.4vw,1.4rem)}
.pc-price small{font-size:.8rem;color:var(--ink-soft)}
.pc-items{margin:clamp(1.8rem,4vw,2.4rem) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.pc-items div{padding:1.3rem .8rem;border-bottom:1px solid var(--rule)}
.pc-items div:nth-child(odd){border-right:1px solid var(--rule)}
.pc-items dt{font-size:.92rem;font-weight:700;line-height:1.6;color:var(--ink)}
.pc-items dd{margin:.45rem 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.5;color:var(--ink)}
.pc-items p{margin:.5rem auto 0;max-width:20em;font-size:.86rem;line-height:1.6;color:var(--ink-soft)}
.pc-extra{max-width:46rem;box-sizing:border-box;margin:1.2rem auto 0;padding:1.3rem clamp(1.2rem,4vw,2rem) 1.4rem;background:var(--panel);text-align:center;text-wrap:balance;font-size:.86rem;line-height:1.9;color:var(--ink-soft)}
.pc-extra b{display:block;margin-bottom:.4rem;font-size:.95rem;font-weight:700;color:var(--ink)}
@media (max-width:520px){ .pc-items{grid-template-columns:minmax(0,1fr)} .pc-items div:nth-child(odd){border-right:0} }
.sv-about{margin-top:clamp(1.6rem,3vw,2.2rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sv-about > div > .sv-sec-lead:first-child{margin-top:0}
@media (max-width:834px){ .sv-about{grid-template-columns:minmax(0,1fr)} }
.sv-close{margin:clamp(1.8rem,4vw,2.4rem) 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,2.2vw,1.3rem);line-height:1.8;color:var(--ink);max-width:none}

/* メインの画像を画面の右端まで出す（2026-10-20、本人の希望）。下の「社外IT・AI担当とは」の画像（枠の中に収まる）と差をつけて、
   開いたときにこれがメインだとわかるように。文の列を詰め、画像の列を広げる。
   はみ出す量は、.wrap の右の余白（画面が 82rem より広いときは、その外側も）ぶん。100vw はスクロールバーを含むので、はみ出しは clip で切る */
/* 地はページの地（#FBF8F6）とトップの帯の中間。トップの帯（.sat-band）も同じ色。地より少しだけ濃くして、画面幅いっぱいの帯に見せる（2026-10-20、試し）。
   帯は画像の高さだけ（パンくずは帯の上、地の色のまま）。.sv-head の後ろに、画面幅いっぱいの面を敷く。帯の下端で次の節に入るので、下の余白は取らない */
.sv-hero-bleed{overflow-x:clip;padding-bottom:0}
.sv-hero-bleed .sv-head{position:relative;isolation:isolate}
/* 帯の下端で次の節に入るので、次の節の上罫は要らない */
.sv-hero-bleed + section{border-top:0}
/* タグの地は白く抜く。トップの帯のタグ（.sat-tags）と同じ */
.sv-hero-bleed .sv-tags li{background:rgba(255,255,255,.6)}
.sv-hero-bleed .sv-head::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:#F7F3EF}
.sv-hero-bleed .sv-head{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,4vw,3.5rem)}
/* 見出しは「戦力に。」で折り返させない（列を詰めたので、幅によっては「に。」だけが落ちる） */
.sv-hero-bleed h1{white-space:nowrap}
/* 2列のまま列が狭くなる幅（835〜1199px）では、1行に収まる大きさまで下げる */
@media (min-width:835px) and (max-width:1199px){ .sv-hero-bleed h1{font-size:3.4vw} }
/* 左端は地に溶かす。トップの帯（.sat-ill）と同じ扱い */
.sv-hero-bleed .sv-fig img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);mask-image:linear-gradient(to right,transparent 0,#000 16%)}
.sv-hero-bleed .sv-fig{margin-right:calc(-1 * (max(0px,(100vw - 82rem) / 2) + var(--gut)));background:none}
@media (max-width:834px){
  /* 1列のときは左右の余白を消して、画面幅いっぱいに */
  .sv-hero-bleed .sv-head{grid-template-columns:minmax(0,1fr)}
  .sv-hero-bleed h1{white-space:normal}
  .sv-hero-bleed .sv-fig{margin-inline:calc(-1 * var(--gut))}
  .sv-hero-bleed .sv-fig img{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
}