/* ============================================================
   まるっとAI 開発実例 case.css
   column.css の上に重ねる差分のみ。設計体系はトップ（home.css）と同じ。
   ・枠線と縦の仕切り線は使わない（面はヘアライン＋やわらかい落ち影で分ける）
   ・2軸タクソノミー（業務領域 × 成果・効果）のタグだけがこのページ固有
   ============================================================ */

/* ---------- 絞り込みラベル ---------- */
.flt-label{
  margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--mute);letter-spacing:.02em;
}
.flt-label + .chips{margin-bottom:20px}
.chips + .flt-label{margin-top:2px}

/* ---------- カードの2軸タグ ---------- */
.tagrow{display:flex;flex-wrap:wrap;gap:7px}
.tag-area,.tag-effect{
  display:inline-block;border-radius:var(--r-pill);
  padding:5px 13px;font-size:11.5px;font-weight:700;letter-spacing:.03em;
}
.tag-area{background:#eaf0fc;color:var(--ink)}
.tag-effect{background:#e3f3ee;color:var(--ink)}

/* ---------- 先頭カードは横組みで大きく ---------- */
@media(min-width:620px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.is-lead{grid-column:1 / -1;flex-direction:row;align-items:stretch}
  .card.is-lead .card-img{flex:0 0 54%;min-width:0}
  .card.is-lead .card-img img{height:100%;object-fit:cover}
  .card.is-lead .card-body{justify-content:center;padding:26px 30px;gap:10px}
  .card.is-lead .card-t{font-size:19px;line-height:1.6}
}

/* ---------- 末尾の注記 ---------- */
.case-note{
  margin:26px 0 0;font-size:12px;line-height:1.9;color:var(--mute);
  word-break:auto-phrase;text-wrap:pretty;
}

/* ---------- カード画像は比率を統一（実例スクショは縦横バラバラ） ---------- */
.grid .card-img{aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.grid .card-img img{width:100%;height:100%;object-fit:cover;object-position:top center}

@media(max-width:734px){
  .flt-label{font-size:12px}
  .card.is-lead .card-t{font-size:16px}
}

/* ---------- ヒーロー（コラム一覧と同じ見え方をHTMLで組む） ---------- */
.case-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:28px;
  border-radius:var(--r-wide);
  background:
    radial-gradient(680px 320px at 88% 118%, rgba(213,40,80,.07), transparent 62%),
    radial-gradient(760px 360px at 8% -20%, rgba(19,85,205,.09), transparent 64%),
    linear-gradient(180deg,#fbfcff 0%,#eef3fc 100%);
  padding:clamp(34px,4vw,52px) clamp(24px,3.4vw,52px);
  min-height:clamp(200px,20vw,260px);
}
.case-hero::before{
  content:"";position:absolute;left:-6%;right:-6%;top:46%;height:58%;
  background:rgba(255,255,255,.55);border-radius:50% 50% 0 0 / 70% 70% 0 0;
  transform:rotate(-3deg);pointer-events:none;
}
.case-hero-copy{position:relative;flex:1;min-width:0}
.case-eyebrow{
  display:inline-block;margin:0 0 12px;padding:6px 18px;
  background:var(--white);color:var(--blue);border-radius:var(--r-pill);
  font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;
  box-shadow:var(--shadow-card);
}
.case-hero h1{
  margin:0;font-size:clamp(28px,3.6vw,46px);line-height:1.3;letter-spacing:-.04em;color:var(--ink);
}
.case-hero h1 .hl{color:var(--blue);margin-left:.12em}
br.sp{display:none}
.case-lead{
  margin:12px 0 0;font-size:15px;font-weight:500;line-height:1.85;color:var(--mute);
  word-break:auto-phrase;text-wrap:pretty;
}
.case-hero-chara{position:relative;flex:0 0 clamp(170px,23vw,280px);align-self:flex-end;margin-bottom:calc(-1 * clamp(34px,4vw,52px))}
.case-hero-chara img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 24px rgba(20,30,60,.16))}

@media(max-width:734px){
  br.sp{display:inline}
  .case-hero{
    display:block;padding:24px 20px 0;min-height:0;border-radius:var(--r-read);
  }
  .case-hero::before{top:52%}
  .case-hero h1{font-size:26px;line-height:1.35}
  .case-eyebrow{margin-bottom:10px;padding:5px 15px;font-size:11.5px}
  .case-lead{margin-top:10px;font-size:13.5px;line-height:1.8}
  /* マスコットは本文に回り込ませる（負のマージンだと角丸で切り取られる） */
  .case-hero-chara{float:right;width:104px;margin:-56px -4px 0 10px}
  .case-hero::after{content:"";display:block;clear:both;height:14px}
}

/* ============================================================
   実例の詳細ページ
   ============================================================ */
.lead{margin:22px 0 0;font-size:15.5px;line-height:2.05;color:var(--ink2);word-break:auto-phrase;text-wrap:pretty}
.note{margin:0;font-size:12.5px;line-height:1.9;color:var(--mute);word-break:auto-phrase;text-wrap:pretty}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

/* ポイントのまとめ（枠線とハードシャドウは使わず、面と影で見せる） */
.case-sum{
  margin:26px 0 0;background:var(--white);border-radius:var(--r-read);
  padding:24px clamp(20px,2.4vw,30px);box-shadow:var(--shadow-card);
}
.case-sum .t{
  display:flex;align-items:center;gap:9px;margin:0 0 6px;
  font-size:15.5px;font-weight:700;letter-spacing:-.02em;
}
.case-sum .t::before{content:"";width:14px;height:14px;border-radius:5px;background:var(--blue)}
.case-sum ul{margin:0;padding:0;list-style:none}
.case-sum li{
  position:relative;padding:11px 0 11px 22px;font-size:14.5px;font-weight:700;
  line-height:1.85;color:var(--ink);word-break:auto-phrase;
}
.case-sum li::before{
  content:"";position:absolute;left:2px;top:1.05em;width:7px;height:7px;
  border-radius:50%;background:var(--blue);
}
.case-sum li b{color:var(--blue-deep)}

/* ---------- 日本語組版: 最終行に数文字だけ残る「みなしご」を防ぐ ---------- */
.rel-tt,.rank>p,.side-t,.case-sum li,.md p,.md li,.toc a,.bc,.lead,.note{
  text-wrap:pretty;
}