/* ============================================
   株式会社Tip — サービスページ(/service/)専用スタイル
   site.css のデザイントークンを継承して拡張
   ============================================ */

/* ヒーロー */
.sv-hero{
  padding:160px clamp(20px,4vw,52px) 64px;
  background:linear-gradient(180deg,#fbfcfc 0%,#fff 100%);
  border-bottom:1px solid var(--line);
}
.sv-hero .wrap{max-width:var(--maxw)}
.sv-hero .wrap.sv-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.sv-hero-media{overflow:hidden;border-radius:4px;box-shadow:0 18px 50px rgba(14,42,71,.16)}
.sv-hero-media img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.sv-hero .sec-en{color:var(--mikan-deep);display:block;margin-bottom:14px}
.sv-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:20px;line-height:1.75}
.sv-hero h1 em{font-style:normal;color:var(--mikan2)}
.sv-hero p{color:var(--ink2);font-size:.93rem;max-width:680px;line-height:2.3}
.sv-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* セクション共通（背景交互） */
.sv-section{padding:88px clamp(20px,4vw,52px)}
.sv-section--surface{background:var(--bg2)}
.sv-section--navy{background:linear-gradient(160deg,var(--navy3) 0%,var(--navy) 70%);color:#fff}
.sv-section .wrap{max-width:var(--maxw)}
.sv-head{margin-bottom:44px}
.sv-head .sv-en{font-family:var(--en);font-size:.68rem;color:var(--mikan-deep);letter-spacing:.26em;font-weight:600;display:block;margin-bottom:10px}
.sv-head h2{font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.8}
.sv-section--navy .sv-head h2{color:#fff}
.sv-section--navy .sv-head .sv-en{color:var(--mikan)}
.sv-lead{color:var(--ink2);font-size:.92rem;max-width:720px;margin-top:14px;line-height:2.25}
.sv-section--navy .sv-lead{color:rgba(255,255,255,.78)}

/* 課題定義リスト */
.sv-pain{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sv-pain-item{background:#fff;border:1px solid var(--line);padding:30px 28px}
.sv-pain-item b{display:block;font-size:1rem;color:var(--navy3);margin-bottom:12px;line-height:1.9}
.sv-pain-item p{font-size:.86rem;color:var(--ink2);line-height:2.1}

/* 提供内容カード */
.sv-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sv-offer-item{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--mikan);
  padding:34px 30px;display:flex;flex-direction:column;gap:12px;
}
.sv-offer-media{margin:-34px -30px 10px;overflow:hidden}
.sv-offer-media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.sv-offer-num{font-family:var(--en);font-size:.72rem;color:var(--mikan-deep);letter-spacing:.2em;font-weight:600}
.sv-offer-item h3{font-size:1.08rem;font-weight:700;line-height:1.8;color:var(--navy3)}
.sv-offer-item p{font-size:.87rem;color:var(--ink2);line-height:2.1;flex:1}
.sv-offer-item .tags{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0}
.sv-offer-item .tags li{font-size:.68rem;color:var(--ink3);border:1px solid var(--line2);padding:3px 10px;border-radius:999px;letter-spacing:.05em;list-style:none}

/* 流れ */
.sv-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.sv-flow-item{position:relative;padding-top:30px}
.sv-flow-item::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--line)}
.sv-flow-item::after{content:"";position:absolute;top:-2px;left:0;width:46px;height:5px;background:var(--mikan)}
.sv-flow-no{font-family:var(--en);font-size:.72rem;color:var(--ink3);letter-spacing:.2em;display:block;margin-bottom:14px;font-weight:600}
.sv-flow-item h3{font-size:.99rem;font-weight:700;line-height:1.9;margin-bottom:10px;color:var(--navy3)}
.sv-flow-item p{color:var(--ink2);font-size:.84rem;line-height:2.05}

/* 料金 */
.sv-price-note{margin-top:26px;font-size:.78rem;color:var(--ink3);line-height:2}
.sv-price-single{
  background:#fff;border:2px solid var(--navy);padding:40px 44px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 44px;
}
.sv-price-single .label{font-size:1.02rem;font-weight:700;color:var(--navy3)}
.sv-price-single .num{font-family:var(--en);font-size:2rem;font-weight:700;color:var(--red)}
.sv-price-single .num small{font-size:.9rem;font-family:var(--sans);font-weight:500}
.sv-price-single p{font-size:.85rem;color:var(--ink2);line-height:2.05;flex:1;min-width:260px}

/* 向いている/向いていない */
.sv-fit{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sv-fit-col{background:#fff;border:1px solid var(--line);padding:32px 32px}
.sv-fit-col.ok{border-top:4px solid #2e7d46}
.sv-fit-col.ng{border-top:4px solid var(--ink3)}
.sv-fit-col h3{font-size:1.02rem;font-weight:700;margin-bottom:18px;color:var(--navy3)}
.sv-fit-col ul{padding:0;margin:0}
.sv-fit-col li{list-style:none;font-size:.88rem;color:var(--ink2);line-height:2;padding:9px 0 9px 30px;position:relative;border-bottom:1px dashed var(--line)}
.sv-fit-col li:last-child{border-bottom:none}
.sv-fit-col.ok li::before{content:"◎";position:absolute;left:2px;color:#2e7d46;font-weight:700}
.sv-fit-col.ng li::before{content:"−";position:absolute;left:2px;color:var(--ink3);font-weight:700}

/* FAQ */
.sv-faq{max-width:820px}
.sv-faq details{border:1px solid var(--line);background:#fff;margin-bottom:12px}
.sv-faq summary{
  cursor:pointer;padding:20px 24px;font-size:.92rem;font-weight:700;color:var(--navy3);
  letter-spacing:.05em;line-height:1.9;list-style:none;position:relative;padding-right:52px;
}
.sv-faq summary::before{content:"Q."; color:var(--mikan-deep);margin-right:10px;font-family:var(--en)}
.sv-faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--ink3);font-weight:400}
.sv-faq details[open] summary::after{content:"−"}
.sv-faq details p{padding:0 24px 22px 24px;font-size:.88rem;color:var(--ink2);line-height:2.15}
.sv-faq details p::before{content:"A. ";color:var(--mikan-deep);font-weight:700;font-family:var(--en)}

/* サービス一覧ページのカード */
.sv-index-list{display:flex;flex-direction:column;gap:44px}
.sv-index-item{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr);gap:clamp(28px,4vw,56px);
  background:#fff;border:1px solid var(--line);padding:clamp(28px,4vw,52px);align-items:center;
}
.sv-index-item .sv-en{font-family:var(--en);font-size:.66rem;color:var(--mikan-deep);letter-spacing:.24em;font-weight:600;display:block;margin-bottom:12px}
.sv-index-item h2{font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.8;margin-bottom:16px}
.sv-index-item p{font-size:.89rem;color:var(--ink2);line-height:2.2;margin-bottom:22px}
.sv-index-media{aspect-ratio:16/10;overflow:hidden;background:var(--wash)}
.sv-index-media img{width:100%;height:100%;object-fit:cover;display:block}
.sv-index-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;padding:0}
.sv-index-tags li{font-size:.7rem;color:var(--ink3);border:1px solid var(--line2);padding:3px 12px;border-radius:999px;list-style:none}

/* CTA帯 */
.sv-cta{
  background:linear-gradient(135deg,var(--navy3) 0%,var(--navy) 100%);color:#fff;
  padding:64px clamp(20px,4vw,52px);text-align:center;
}
.sv-cta h2{color:#fff;font-size:clamp(1.25rem,2.4vw,1.7rem);margin-bottom:18px}
.sv-cta p{color:rgba(255,255,255,.78);font-size:.9rem;max-width:640px;margin:0 auto 34px;line-height:2.2}
.sv-cta .btn-w{min-width:300px}
.sv-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* レスポンシブ */
/* サービスページのロゴマーキー帯 */
.sv-partners{padding:0 0 8px;background:#fff}
.sv-partners .partners-head{padding-top:58px}

@media(max-width:1020px){
  .sv-pain,.sv-offer{grid-template-columns:1fr}
  .sv-flow{grid-template-columns:1fr 1fr;gap:36px 24px}
  .sv-index-item{grid-template-columns:1fr}
  .sv-index-media{order:-1}
  .sv-hero .wrap.sv-hero-grid{grid-template-columns:1fr;gap:32px}
  .sv-hero-media{order:-1}
  .sv-hero-media img{aspect-ratio:16/9}
}
@media(max-width:640px){
  .sv-hero{padding:118px 22px 44px}
  .sv-section{padding:60px 22px}
  .sv-flow{grid-template-columns:1fr}
  .sv-fit{grid-template-columns:1fr}
  .sv-price-single{padding:28px 24px}
  .sv-cta .btn-w{min-width:0;width:100%}
}