/* ============================================================
   /service 事業内容（一覧）
   参照デザイン：toyota-invention.partners
   構成要素は「角丸カード」に統一する（2026-08-07 赤崎さん指示）
   ※ リポジトリ規約の角丸3pxではなく 14px を使用。規約更新は別途判断
   ============================================================ */

.svc-tip{
  --ink:#181B39;
  --ink-2:#3B4160;
  /* 補足テキスト。白地で 4.14:1 と WCAG AA(4.5:1) を割っていたため濃くした（白 5.52） */
  --ink-3:#62687F;
  --rule:rgba(24,27,57,.12);
  --rule-soft:rgba(24,27,57,.07);
  --surface:#F2F5F9;
  --card:14px;
  --shadow:0 1px 2px rgba(24,27,57,.04), 0 10px 34px rgba(24,27,57,.07);
  --shadow-h:0 2px 4px rgba(24,27,57,.06), 0 20px 52px rgba(24,27,57,.12);
  --gut:clamp(20px,4.4vw,64px);
  background:#fff;
  color:var(--ink-2);
  /* 日本語を文節で折り返す。「始／めるまでに」のような分断を防ぐ */
  word-break:auto-phrase;
  line-break:strict;
}
.svc-tip .liquid-bg{display:none;}
.svc-tip main{position:relative;z-index:2;}
.tip-wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--gut);}

/* ── セクション ───────────────────────────── */
.tip-sec{padding:clamp(80px,9vw,148px) 0;}
.tip-sec.is-surface{background:#fff;}

/* セクション見出し：日本語ひとつ。大きさは TOP の見出しに合わせている */
.tip-head{margin-bottom:clamp(36px,4.4vw,64px);}
.tip-head h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(28px,3.2vw,44px);
  font-weight:600;line-height:1.4;letter-spacing:.06em;color:var(--ink);
}
.tip-head .lead{
  margin-top:24px;max-width:40em;
  font-size:15px;line-height:2.1;color:var(--ink-2);
  text-wrap:pretty;
}
/* 強調部分が行をまたいで切れないよう、ひとかたまりで折り返す */
.tip-head .lead strong{display:inline-block;font-weight:600;color:var(--ink);}

/* ── ボタン ─────────────────────────────── */
.tip-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:17px 30px;border-radius:6px;
  background:var(--ink);color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.1em;line-height:1;
  transition:background .3s ease;
}
.tip-btn i{font-style:normal;transition:transform .3s ease;}
.tip-btn:hover{background:#2A2E54;}
.tip-btn:hover i{transform:translateX(5px);}
.tip-btn.is-disabled{
  cursor:default;
  pointer-events:none;
  background:rgba(24,27,57,.82);
}
.tip-btn.is-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule);}
.tip-btn.is-ghost:hover{background:rgba(24,27,57,.04);}
.tip-btn.is-light{background:#fff;color:var(--ink);}
.tip-btn.is-light:hover{background:rgba(255,255,255,.88);}

.tip-more{margin-top:clamp(36px,4vw,56px);}

/* ══════════════════════════════════════════
   ファーストビュー
   About us（.company-gif-hero）・Career・Insight と同じ枠。
   枠と比率の指定は assets/style.css の共通ルールにまとめてあるため、
   ここでは何も足さない（独自指定を持つとページごとに見え方がずれる）。
   ══════════════════════════════════════════ */

/* ── ファーストビュー直下のリード ── */
.tip-lead-sec{padding:clamp(64px,8vw,120px) 0 clamp(24px,3vw,40px);}
.tip-lead-sec .tip-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
.tip-lead-sec .headline{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(24px,3vw,40px);line-height:1.6;letter-spacing:.05em;color:var(--ink);
}
.tip-lead-sec .copy p{font-size:15px;line-height:2.15;color:var(--ink-2);}
.tip-lead-sec .copy p + p{margin-top:20px;}

/* ══════════════════════════════════════════
   カード共通
   ══════════════════════════════════════════ */
.tip-card{
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--card);overflow:hidden;
  box-shadow:var(--shadow);
  transition:box-shadow .4s ease, transform .4s ease;
}
a.tip-card{color:inherit;}
a.tip-card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);}
.tip-card .shot{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;flex:0 0 auto;      /* flex で潰れないように固定 */
  background:#fff;
}
.tip-card .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.2,1);}
a.tip-card:hover .shot img{transform:scale(1.05);}
.tip-card .body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.2vw,32px);}

/* ══════════════════════════════════════════
   事業カード：TOP の .business-card と同じ見せ方
   （写真の上に白文字を重ねる／右上に矢印／ホバーで浮く）
   ══════════════════════════════════════════ */
.svc-tip{--r-card:22px;--r-card-sm:16px;--r-pill:999px;}

.business-cards{
  display:grid;min-width:0;gap:20px;
  grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;
}
.business-card{
  position:relative;display:flex;overflow:hidden;
  min-height:340px;align-items:flex-end;
  border-radius:var(--r-card);background:#1d2548;text-align:left;
  transition:translate .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease, opacity .9s ease, transform .9s ease;
}
.business-card::after{
  position:absolute;inset:0;content:"";
  /* 写真の明るい部分でカード上の白文字が 4.15:1 まで落ちて WCAG AA を割っていたため、
     暗幕を上端から少し濃くした（写真の見え方はほぼ変えずに 5:1 前後を確保）。 */
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-10%), rgba(126,154,219,.3), transparent 62%),
             linear-gradient(180deg, rgba(8,13,33,.28) 18%, rgba(8,13,33,.94));
}
.business-card:hover{box-shadow:0 24px 48px rgba(16,21,48,.26);translate:0 -6px;}

.business-card .panel-image{
  position:absolute;inset:0;
  animation:card-drift 30s ease-in-out infinite alternate;
  transition:scale .75s ease, filter .55s ease, opacity .55s ease;
  opacity:.8;filter:saturate(.86);
  background-position:center;background-size:cover;
}
.business-card:nth-child(2) .panel-image{animation-delay:-7s;}
.business-card:nth-child(3) .panel-image{animation-delay:-14s;}
.business-card:nth-child(4) .panel-image{animation-delay:-21s;}
.business-card:hover .panel-image{opacity:.88;filter:saturate(1);scale:1.03;}
@keyframes card-drift{
  from{transform:scale(1.1) translate3d(0,0,0);}
  to  {transform:scale(1.18) translate3d(-1.2%,-1%,0);}
}

.business-card .panel-content{position:relative;z-index:2;width:100%;padding:32px 30px 30px;color:#fff;}
.business-card .panel-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.business-card .panel-number{
  display:inline-block;padding:5px 13px;
  border:1px solid rgba(255,255,255,.5);border-radius:var(--r-pill);
  font-size:10px;font-weight:600;letter-spacing:.16em;
}
.business-card .panel-verb{
  font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.14em;
  color:rgba(255,255,255,.92);
}
.business-card h3{font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:.05em;line-height:1.5;}
.business-card p{margin-top:12px;font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.78);}

.business-card .panel-arrow{
  position:absolute;z-index:2;top:24px;right:24px;
  display:flex;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.45);border-radius:var(--r-pill);
  color:#fff;font-size:15px;
  transition:background .4s ease, transform .4s ease;
}
.business-card:hover .panel-arrow{background:rgba(255,255,255,.16);transform:translate(4px,-4px);}

/* ══════════════════════════════════════════
   はじめ方：4枚のステップカード
   ══════════════════════════════════════════ */
.tip-flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,24px);}
.tip-flow .tip-card{background:#fff;box-shadow:none;border:1px solid var(--rule);}
.tip-flow .body{padding:clamp(24px,2vw,30px);}
.tip-flow .n{
  font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:var(--ink-3);
}
.tip-flow .head{display:block;margin-top:18px;}
.tip-flow .t{display:block;font-size:17px;font-weight:600;letter-spacing:.05em;color:var(--ink);}
.tip-flow .d{
  display:inline-block;margin-top:14px;padding:6px 12px;border-radius:6px;
  background:rgba(24,27,57,.05);font-size:11px;letter-spacing:.1em;color:var(--ink);
  white-space:nowrap;
}
.tip-flow .x{margin-top:16px;font-size:13.5px;line-height:2;color:var(--ink-2);}
.tip-note{margin-top:28px;font-size:12px;line-height:2;color:var(--ink-3);}

/* ══════════════════════════════════════════
   導入事例：1枚の大きなカード
   ══════════════════════════════════════════ */
.tip-case{
  background:#fff;border-radius:var(--card);overflow:hidden;box-shadow:var(--shadow);
}
.tip-case .shot{display:block;overflow:hidden;aspect-ratio:16/9;background:#fff;}
.tip-case .shot img{width:100%;height:100%;object-fit:cover;display:block;}
.tip-case .body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,64px);padding:clamp(30px,3.4vw,52px);
}
.tip-case .client{font-size:12px;letter-spacing:.16em;color:var(--ink-3);}
.tip-case h3{margin-top:16px;font-family:var(--serif);font-size:clamp(20px,1.9vw,28px);font-weight:600;line-height:1.7;letter-spacing:.04em;color:var(--ink);}
.tip-case .tip-btn{margin-top:32px;}
.tip-case .rgt p{font-size:14px;line-height:2.15;color:var(--ink-2);}
.tip-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px;padding-top:22px;border-top:1px solid var(--rule-soft);}
.tip-facts dt{font-size:11px;letter-spacing:.14em;color:var(--ink-3);}
.tip-facts dd{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink);}

/* ══════════════════════════════════════════
   考察：横長のカバー画像だけのカード（2列）
   ══════════════════════════════════════════ */
.tip-posts{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.2vw,32px);}
.tip-posts .tip-card .shot{aspect-ratio:16/9;}

/* ══════════════════════════════════════════
   CTA
   ══════════════════════════════════════════ */
.tip-cta{position:relative;overflow:hidden;padding:clamp(88px,10vw,152px) 0;background:var(--ink);}
.tip-cta .bg{position:absolute;inset:0;z-index:0;}
.tip-cta .bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.22;}
.tip-cta .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,36,.58),rgba(14,16,36,.88));}
.tip-cta .tip-wrap{position:relative;z-index:1;}
.tip-cta .en{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.8vw,66px);line-height:1.18;color:#fff;}
.tip-cta .ja{margin-top:26px;max-width:38em;font-size:clamp(13.5px,1.05vw,15.5px);line-height:2.2;color:rgba(255,255,255,.78);}
.tip-cta .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;}
.tip-cta .tip-btn.is-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.36);}
.tip-cta .tip-btn.is-ghost:hover{background:rgba(255,255,255,.1);}

/* ══════════════════════════════════════════
   スクロール表示
   ══════════════════════════════════════════ */
.tip-rise{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);}
.tip-rise.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .tip-rise{opacity:1;transform:none;transition:none;}
  .tip-card .shot img{transition:none;}
  a.tip-card{transition:none;}
}

/* ══════════════════════════════════════════
   レスポンシブ
   ══════════════════════════════════════════ */
@media (max-width:1000px){
  .tip-flow{grid-template-columns:repeat(2,1fr);}
  /* 1列に落とし、ボタンは本文のあとに置く */
  .tip-case .body{display:flex;flex-direction:column;gap:0;}
  .tip-case .lft{display:contents;}
  .tip-case .client{order:1;}
  .tip-case h3{order:2;}
  .tip-case .rgt{order:3;margin-top:22px;}
  .tip-case .tip-btn{order:4;margin-top:30px;align-self:flex-start;}
}
@media (max-width:720px){
  /* ── 全体の間合いを詰める（TOPのスマホ値に合わせている） ── */
  .tip-sec{padding:72px 0;}
  .tip-lead-sec{padding:56px 0 20px;}
  .tip-lead-sec .tip-wrap{grid-template-columns:1fr;gap:20px;}
  .tip-lead-sec .headline{font-size:24px;line-height:1.7;}
  /* 字間はサイト共通で .02em ある。スマホでは詰めて1行の文字数を稼ぎ、
     「す。」だけが次行に落ちるのを防ぐ */
  .tip-lead-sec .copy p{font-size:14px;letter-spacing:0;line-height:2;}
  .tip-lead-sec .copy p + p{margin-top:16px;}
  /* 狭い画面では明示的な改行を無効にし、自然に折り返させる */
  .tip-lead-sec .copy br{display:none;}

  .tip-head{margin-bottom:28px;}
  .tip-head h2{font-size:26px;line-height:1.5;}
  .tip-head .lead{margin-top:18px;font-size:14px;letter-spacing:0;line-height:2;}

  /* ── 事業カード：1列。高さと内側余白を実際の文量に合わせる ── */
  .business-cards,.tip-posts{grid-template-columns:1fr;}
  .business-cards{gap:14px;}
  .business-card{min-height:250px;border-radius:var(--r-card-sm);}
  /* カードが 340px → 250px に縮む分、文字が暗幕の薄い位置まで上がってしまい、
     写真が明るいカードで白文字が 4.05:1 まで落ちていた。SPだけランプを早く立ち上げる。 */
  .business-card::after{
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,-10%), rgba(126,154,219,.3), transparent 62%),
               linear-gradient(180deg, rgba(8,13,33,.3) 8%, rgba(8,13,33,.74) 46%, rgba(8,13,33,.96) 100%);
  }
  .business-card .panel-content{padding:26px 22px 24px;}
  .business-card .panel-meta{gap:10px;margin-bottom:10px;}
  .business-card .panel-verb{font-size:16px;}
  .business-card h3{font-size:19px;}
  .business-card p{margin-top:10px;font-size:13.5px;letter-spacing:0;line-height:1.9;}
  .business-card .panel-arrow{top:18px;right:18px;width:34px;height:34px;font-size:14px;}

  /* ── はじめ方 ── */
  .tip-flow{grid-template-columns:1fr;gap:12px;}
  .tip-flow .body{padding:22px;}
  /* タイトルと期間を同じ行に並べる（縦に積むと間延びするため） */
  .tip-flow .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
  .tip-flow .t{font-size:16px;}
  .tip-flow .d{margin-top:0;padding:5px 10px;}
  .tip-flow .x{margin-top:12px;font-size:13.5px;letter-spacing:0;line-height:1.9;}

  /* ── 事例・コラム ── */
  .tip-posts{gap:14px;}
  .tip-more{margin-top:28px;}
  .tip-case .body{padding:26px 22px;}

  /* ── CTA ── */
  .tip-cta{padding:76px 0;}
  .tip-cta .ja{margin-top:20px;letter-spacing:0;line-height:2;}
  .tip-cta .acts{margin-top:32px;gap:12px;}
  .tip-cta .acts .tip-btn{width:100%;justify-content:center;}
}
@media (max-width:520px){
  /* 事例の3項目は横に詰めると読みにくいので縦に */
  .tip-facts{grid-template-columns:1fr;gap:16px;}
  .tip-case .body{padding:26px 22px;}
}

/* ── よくある質問 ─────────────────────────────
   詳細ページ側は service-figure.css の .nf-faq を使うが、
   このハブは service-tip.css だけを読むため、同じ体裁を
   ページ内のトークン（--rule / --ink / --serif）で組み直す。 */
.tip-faq{border-top:1px solid var(--rule);}
.tip-faq details{border-bottom:1px solid var(--rule);}
.tip-faq summary{
  position:relative;display:block;list-style:none;cursor:pointer;
  padding:22px 44px 22px 0;
  font-family:var(--serif);font-size:clamp(15px,1.5vw,17px);font-weight:600;
  line-height:1.7;letter-spacing:.02em;color:var(--ink);
  transition:color .2s;
}
.tip-faq summary::-webkit-details-marker{display:none;}
.tip-faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:19px;font-weight:400;line-height:1;color:var(--ink-3);
}
.tip-faq details[open] summary::after{content:"−";}
.tip-faq summary:hover{color:var(--ink-2);}
.tip-faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.tip-faq details p{
  margin:0;padding:0 0 26px;
  font-size:15px;line-height:2.05;color:var(--ink-2);
}