/* svc_pages.css - サービス紹介ページ（services.php / oem.php）共通スタイル
   トップページ（top_v2.css）・lp_intro.php と同じ白基調・紺×オレンジ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --or:#e8743b;--or3:#d2612a;--or-p:#fdf1ea;
  --navy:#24508f;--navy2:#1b3f73;--navy-p:#eef3fa;
  --green:#1d8572;--green-p:#e6f5f0;
  --cream:#fcf8f3;--bg:#f4f7fb;
  --text:#2b3240;--sub:#5f6b7c;--line:#e3e8ef;
  --round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;color:var(--text);background:#fff;line-height:1.8;font-size:14px;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.sp-inner{max-width:1120px;margin:0 auto;padding:0 24px;}
.sp-sec{padding:72px 0;}
.sp-sec.tint{background:var(--bg);}
.sp-sec.cream{background:var(--cream);}

/* 見出し */
.sp-head{text-align:center;margin-bottom:40px;}
.sp-head .en{display:block;font-size:12px;font-weight:700;letter-spacing:.32em;color:var(--or);text-transform:uppercase;}
.sp-head h2{font-family:var(--round);font-size:clamp(22px,2.6vw,30px);font-weight:900;color:var(--text);margin-top:12px;line-height:1.45;}
.sp-head h2 .num{font-size:1.35em;color:var(--or);}
.sp-head .ln{width:40px;height:3px;background:var(--or);border-radius:2px;margin:16px auto 0;}
.sp-head p{margin-top:16px;color:var(--sub);font-size:14px;}

/* ボタン */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 30px;border-radius:999px;font-weight:700;font-size:14.5px;transition:all .2s;cursor:pointer;white-space:nowrap;}
.sp-btn-or{background:var(--or);color:#fff;box-shadow:0 6px 16px rgba(232,116,59,.25);}
.sp-btn-or:hover{background:var(--or3);transform:translateY(-2px);}
.sp-btn-line{background:#fff;color:var(--navy);border:1.5px solid var(--navy);}
.sp-btn-line:hover{background:var(--navy-p);}
.sp-btns{display:flex;flex-wrap:wrap;gap:12px;}

/* ヒーロー（右に写真・左に文字） */
.sp-hero{padding:28px 0 0;}
.sp-hero-box{position:relative;display:flex;align-items:center;min-height:400px;border-radius:20px;overflow:hidden;
  background-color:var(--cream);background-size:cover;background-position:right center;background-repeat:no-repeat;}
.sp-hero-box::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(252,248,243,.92) 0%,rgba(252,248,243,.7) 34%,rgba(252,248,243,0) 52%);pointer-events:none;}
.sp-hero-text{position:relative;z-index:1;width:52%;padding:44px 0 48px 48px;}
.sp-hero-catch{font-size:13px;font-weight:700;color:var(--or3);letter-spacing:.1em;margin-bottom:14px;}
.sp-hero h1{font-family:var(--round);font-size:clamp(28px,3.4vw,42px);font-weight:900;line-height:1.38;color:var(--navy2);margin-bottom:18px;}
.sp-hero h1 em{font-style:normal;color:var(--or);}
.sp-hero-lead{font-size:14.5px;color:#45505f;line-height:2;margin-bottom:24px;}

/* 汎用カード */
.sp-grid{display:grid;gap:18px;}
.sp-grid.c2{grid-template-columns:repeat(2,1fr);}
.sp-grid.c3{grid-template-columns:repeat(3,1fr);}
.sp-grid.c4{grid-template-columns:repeat(4,1fr);}
.sp-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;transition:box-shadow .2s,transform .2s;}
.sp-card:hover{box-shadow:0 10px 24px rgba(30,50,90,.08);transform:translateY(-2px);}
.sp-card h3{font-size:16px;font-weight:800;color:var(--text);margin-bottom:8px;line-height:1.5;}
.sp-card p{font-size:13px;color:var(--sub);line-height:1.85;}
.sp-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--navy-p);color:var(--navy);}
.sp-ic.or{background:var(--or-p);color:var(--or3);}
.sp-ic.gr{background:var(--green-p);color:var(--green);}

/* サービス紹介（写真＋文章の交互ブロック） */
.sp-svc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;margin-bottom:24px;}
.sp-svc:nth-child(even) .sp-svc-img{order:2;}
.sp-svc-img{min-height:320px;background-color:var(--navy-p);background-size:cover;background-position:center;}
.sp-svc-body{padding:40px 44px;display:flex;flex-direction:column;justify-content:center;}
.sp-svc-tag{display:inline-block;width:fit-content;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:12px;}
.sp-svc h3{font-family:var(--round);font-size:clamp(22px,2.4vw,28px);font-weight:900;margin-bottom:10px;line-height:1.4;}
.sp-svc .copy{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;}
.sp-svc p{font-size:13.5px;color:var(--sub);line-height:1.95;margin-bottom:14px;}
.sp-checks{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:22px;}
.sp-checks li{position:relative;padding-left:26px;font-size:13.5px;font-weight:600;}
.sp-checks li::before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;background:var(--or) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 12 4 4 8-8'/%3e%3c/svg%3e") center/11px no-repeat;}
.sp-svc.oem .sp-svc-tag{background:var(--or-p);color:var(--or3);} .sp-svc.oem h3{color:var(--or);}
.sp-svc.rk .sp-svc-tag{background:var(--navy-p);color:var(--navy);} .sp-svc.rk h3{color:var(--navy);}
.sp-svc.ai .sp-svc-tag{background:var(--green-p);color:var(--green);} .sp-svc.ai h3{color:var(--green);}
.sp-svc.ai .sp-checks li::before{background-color:var(--green);}
.sp-svc.rk .sp-checks li::before{background-color:var(--navy);}

/* 流れ（ステップ） */
.sp-steps{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:14px;counter-reset:st;}
.sp-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;text-align:center;}
.sp-step::before{counter-increment:st;content:counter(st,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--round);font-weight:900;font-size:15px;}
.sp-step:nth-child(even)::before{background:var(--or);}
.sp-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:42px;width:10px;height:10px;border-top:2px solid #c3cfdf;border-right:2px solid #c3cfdf;transform:rotate(45deg);}
.sp-step h3{font-size:14.5px;font-weight:800;margin-bottom:6px;}
.sp-step p{font-size:12.5px;color:var(--sub);line-height:1.8;}

/* 比較表 */
.sp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff;}
.sp-table{width:100%;border-collapse:collapse;min-width:560px;font-size:13.5px;}
.sp-table th,.sp-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.sp-table tr:last-child th,.sp-table tr:last-child td{border-bottom:none;}
.sp-table thead th{background:var(--bg);font-weight:800;color:var(--navy2);}
.sp-table thead th.hl{background:var(--or-p);color:var(--or3);}
.sp-table tbody th{width:22%;color:var(--sub);font-weight:700;}
.sp-table td.hl{font-weight:700;color:var(--text);background:#fffaf6;}

/* 画像付きカード（活用イメージ） */
.sp-pic{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;}
.sp-pic-img{height:190px;background-color:var(--navy-p);background-size:cover;background-position:center;}
.sp-pic-body{padding:18px 20px 22px;}
.sp-pic-body .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--or3);background:var(--or-p);padding:3px 10px;border-radius:999px;margin-bottom:8px;}
.sp-pic-body h3{font-size:15px;font-weight:800;margin-bottom:6px;}
.sp-pic-body p{font-size:13px;color:var(--sub);line-height:1.8;}

/* 注意・補足 */
.sp-note{background:var(--navy-p);border-radius:14px;padding:18px 22px;font-size:13px;color:var(--sub);line-height:1.9;}
.sp-note strong{color:var(--navy2);}
.sp-note ul{margin:6px 0 0 1.2em;}

/* FAQ */
.sp-faq{display:flex;flex-direction:column;gap:10px;max-width:880px;margin:0 auto;}
.sp-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;}
.sp-faq summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;font-weight:700;font-size:14.5px;}
.sp-faq summary::-webkit-details-marker{display:none;}
.sp-faq summary::before{content:"Q";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-family:var(--round);}
.sp-faq summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid #9aa5b5;border-bottom:2px solid #9aa5b5;transform:rotate(45deg);transition:transform .2s;flex-shrink:0;}
.sp-faq details[open] summary::after{transform:rotate(-135deg);}
.sp-faq .a{padding:0 22px 18px 60px;font-size:13.5px;color:var(--sub);line-height:1.95;}

/* 最後の相談CTA */
.sp-cta{display:flex;align-items:center;gap:28px;padding:34px 40px;border-radius:20px;background:linear-gradient(120deg,#fdf6ef 0%,#eef3fa 100%);border:1px solid var(--line);}
.sp-cta-text{flex:1;}
.sp-cta h2{font-family:var(--round);font-size:clamp(20px,2.4vw,26px);font-weight:900;color:var(--navy2);margin-bottom:8px;line-height:1.45;}
.sp-cta p{font-size:13.5px;color:var(--sub);}

/* レスポンシブ */
@media (max-width:1000px){
  .sp-grid.c4{grid-template-columns:repeat(2,1fr);}
  .sp-steps{grid-template-columns:repeat(2,1fr);}
  .sp-step:not(:last-child)::after{display:none;}
}
@media (max-width:860px){
  .sp-hero-box{flex-direction:column;align-items:stretch;min-height:0;background-size:auto 220px;background-position:right top;}
  .sp-hero-box::after{display:none;}
  .sp-hero-text{width:auto;padding:236px 24px 30px;background:linear-gradient(180deg,rgba(252,248,243,0) 0,var(--cream) 220px);}
  .sp-grid.c3{grid-template-columns:1fr;}
  .sp-svc{grid-template-columns:1fr;}
  .sp-svc:nth-child(even) .sp-svc-img{order:0;}
  .sp-svc-img{min-height:220px;}
  .sp-svc-body{padding:26px 22px;}
  .sp-cta{flex-direction:column;align-items:flex-start;padding:26px 22px;}
}
@media (max-width:600px){
  .sp-inner{padding:0 16px;}
  .sp-sec{padding:48px 0;}
  .sp-grid.c2,.sp-grid.c4{grid-template-columns:1fr;}
  .sp-steps{grid-template-columns:1fr;}
  .sp-hero h1{font-size:25px;}
  .sp-hero-lead br{display:none;}
  .sp-btns{flex-direction:column;align-items:stretch;}
  .sp-faq .a{padding-left:22px;}
}