@charset "UTF-8";
/* ============================================================
   事業内容ページ  css/service.css
   ============================================================ */

/* 見出し */
.svc__head{
  display:flex; align-items:center; gap:22px;
  margin-bottom: clamp(30px, 5vw, 46px);
}
.svc__num{
  font-family:var(--font-en); font-weight:700;
  font-size: clamp(52px, 7vw, 84px); line-height:1;
  color:transparent; -webkit-text-stroke:2px var(--blue-bright);
}
.svc__head h2{
  font-size: clamp(24px, 3.4vw, 34px); font-weight:900;
  color:var(--navy); letter-spacing:.1em;
}
.svc__head h2 small{
  display:block; font-family:var(--font-en); font-weight:600;
  font-size:12px; letter-spacing:.3em; color:var(--blue-bright); margin-top:6px;
}

/* リード（イラスト＋説明） */
.svc__lead{
  display:grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(26px, 5vw, 64px);
  align-items:center;
}
.svc__lead--rev .svc__illust{ order:2; }
.svc__illust{
  background:
    radial-gradient(circle at 24% 18%, #ffffff, var(--paper) 70%);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: var(--shadow-sm);
  position:relative; overflow:hidden;
}
.svc__illust::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(43,85,160,.12) 1.3px, transparent 1.4px);
  background-size: 17px 17px;
  mask-image: linear-gradient(125deg, #000 8%, transparent 50%);
  -webkit-mask-image: linear-gradient(125deg, #000 8%, transparent 50%);
}
.svc__illust img{ width:100%; height:auto; display:block; }
.svc__desc .catch{
  font-size: clamp(20px, 2.6vw, 26px); font-weight:900;
  color:var(--blue); letter-spacing:.1em;
  margin-bottom: 14px;
}
.svc__desc > p:not(.catch){ font-size:14.5px; color:#39414f; }
.svc__tags{
  margin: 20px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.svc__tags li{
  font-size:12.5px; font-weight:700; letter-spacing:.08em;
  color:var(--blue-deep);
  background: #e9f0fc;
  border:1px solid var(--line);
  border-radius:999px; padding: 6px 16px;
}

/* 写真3枚 */
.svc__photos{
  margin-top: clamp(36px, 6vw, 56px);
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(14px, 2.2vw, 24px);
}
.svc__photos figure{ position:relative; }
.svc__photos img{
  width:100%; height: 220px; object-fit:cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.svc__photos figcaption{
  margin-top:10px; font-size:13px; color:#475064;
  display:flex; align-items:center; gap:.6em;
}
.svc__photos figcaption::before{
  content:""; width:.7em; height:.7em; flex:none;
  background: linear-gradient(135deg, var(--cyan), var(--blue-bright));
  border-radius:3px;
}

/* 設備 */
.svc__equip{
  margin-top: clamp(36px, 6vw, 56px);
  background: linear-gradient(140deg, var(--blue-deep), var(--blue));
  color:#fff; border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
  position:relative; overflow:hidden;
}
.svc__equip::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.1) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: linear-gradient(115deg, transparent 40%, #000);
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, #000);
}
.svc__equip h3{
  position:relative;
  font-size: clamp(18px, 2.4vw, 22px); font-weight:900; letter-spacing:.12em;
  margin-bottom: 22px;
  display:flex; align-items:center; gap:.7em;
}
.svc__equip h3::before{
  content:""; width:.55em; height:.55em; border-radius:50%; background:var(--yellow);
  box-shadow: .95em 0 0 -2px var(--magenta), 1.9em 0 0 -4px var(--cyan);
  margin-right:1.7em; flex:none;
}
.svc__equip dl{
  position:relative;
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(14px, 2vw, 22px);
}
.svc__equip dl > div{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 20px;
}
.svc__equip dt{
  font-family:var(--font-en); font-weight:700; font-size:17px;
  letter-spacing:.06em; color:var(--yellow); margin-bottom:8px;
}
.svc__equip dd{ font-size:13.5px; color:var(--text-on-blue); }

/* システム開発フロー */
.svc__flow{
  margin-top: clamp(36px, 6vw, 56px);
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(12px, 1.8vw, 20px);
  counter-reset: flow;
}
.svc__flow li{
  position:relative;
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
}
.svc__flow li:not(:last-child)::after{
  content:""; position:absolute; right:-14px; top:50%; translate:0 -50%;
  border:7px solid transparent; border-left-color: var(--blue-bright);
  z-index:1;
}
.svc__flow .step{
  font-family:var(--font-en); font-weight:700; font-size:12px;
  letter-spacing:.22em; color:#fff;
  background: linear-gradient(120deg, var(--cyan), var(--blue-bright));
  border-radius:999px; padding:4px 14px;
  display:inline-block;
}
.svc__flow h3{
  margin-top:14px; font-size:17px; font-weight:900; color:var(--navy); letter-spacing:.08em;
}
.svc__flow p{ margin-top:8px; font-size:13px; color:#475064; }

/* WEB制作サンプル */
.svc__works{ margin-top: clamp(36px, 6vw, 56px); }
.svc__works h3{
  font-size: clamp(18px, 2.4vw, 22px); font-weight:900; color:var(--navy);
  letter-spacing:.12em; margin-bottom: 22px;
  display:flex; align-items:baseline; gap:14px;
}
.svc__works h3 small{
  font-family:var(--font-en); font-weight:600; font-size:11px;
  letter-spacing:.3em; color:var(--blue-bright);
}
.svc__works ul{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(12px, 1.8vw, 20px);
}
.svc__works li{
  border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.svc__works li:hover{ transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--shadow); }
.svc__works img{ width:100%; height:auto; display:block; }
.svc__works .note{ margin-top:14px; font-size:12px; color:#6b7588; }

/* CTA */
.svc-cta{
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(0,160,233,.3), transparent 60%),
    linear-gradient(120deg, var(--navy-deep), var(--blue-deep));
  color:#fff; text-align:center;
  padding: clamp(60px, 9vw, 100px) 0;
  position:relative; overflow:hidden;
}
.svc-cta::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.5px);
  background-size: 24px 24px;
}
.svc-cta .wrap{ position:relative; }
.svc-cta h2{
  font-size: clamp(20px, 3vw, 30px); font-weight:900; letter-spacing:.1em;
}
.svc-cta h2 .en{
  display:block; font-family:var(--font-en); font-weight:700;
  font-size:13px; letter-spacing:.4em; color:var(--yellow); margin-bottom:12px;
}
.svc-cta p{ margin:16px 0 32px; color:var(--text-on-blue); font-size:14.5px; }

/* レスポンシブ */
@media (max-width: 1024px){
  .svc__flow{ grid-template-columns: repeat(2,1fr); }
  .svc__flow li:nth-child(2)::after{ content:none; }
}
@media (max-width: 860px){
  .svc__lead{ grid-template-columns: 1fr; }
  .svc__lead--rev .svc__illust{ order:0; }
  .svc__illust{ max-width: 480px; margin-inline:auto; }
  .svc__photos{ grid-template-columns: 1fr; max-width:520px; margin-inline:auto; margin-top:36px; }
  .svc__photos img{ height: 200px; }
  .svc__equip dl{ grid-template-columns: 1fr; }
  .svc__works ul{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .svc__flow{ grid-template-columns: 1fr; }
  .svc__flow li:not(:last-child)::after{
    right:auto; left:50%; top:auto; bottom:-14px; translate:-50% 0;
    border:7px solid transparent; border-top-color: var(--blue-bright);
  }
}