/* =========================================================
   AI活用事例ポートフォリオ — portfolio.css
   style.css / localai.css の上に重ねるサブページ専用スタイル

   読みやすさの方針
   ・1事例の見える情報は「タイトル → 一言説明 → 効果 → AI活用 → リンク」の順に絞る
   ・長い説明・表・タグは <details> に畳み、開いたときだけ見せる
   ・ボックスは「効果」だけに使い、ほかは線と余白で区切る
   ========================================================= */

/* ---- HERO 数字 ---- */
.pf-stats{
  list-style:none; display:flex; justify-content:center; gap:clamp(14px,4vw,40px);
  margin:44px auto 40px;
}
.pf-stats li{
  min-width:110px; padding:16px 18px; border-radius:16px;
  background:var(--panel); border:1px solid var(--panel-bd);
}
.pf-stats strong{
  display:block; font-family:var(--f-en); font-size:clamp(28px,5vw,40px); line-height:1.1;
  color:var(--accent); transition:color 1s;
}
.pf-stats span{ font-size:13px; color:var(--ink-soft); }

/* ---- 事例一覧（ページ内ジャンプ） ---- */
.pf-note{ margin-top:10px; font-size:13px; color:var(--ink-dim); }
.pf-index{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pf-index-card{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  padding:16px 18px; border-radius:14px; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--panel-bd); border-left:3px solid var(--c);
  transition:background .25s, transform .25s;
}
.pf-index-card:hover{ transform:translateY(-3px); background:color-mix(in srgb, var(--c) 10%, transparent); }
.pf-no{ font-family:var(--f-en); font-weight:700; font-size:13px; color:var(--c); letter-spacing:.1em; }
.pf-kind{
  font-size:13px; font-weight:700; padding:0 10px; border-radius:20px; line-height:1.7;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.pf-index-card h3{ flex-basis:100%; font-size:16px; line-height:1.4; }

/* ---- 事例（作品画面 × 説明の横並び） ---- */
.pf-case-section{ --ca:var(--c, var(--accent)); padding-block:clamp(24px,4vh,40px); }
.pf-case-section + .pf-case-section{ padding-top:0; }
.pf-case-section + .pf-case-section .pf-case{ border-top:1px solid var(--panel-bd); padding-top:clamp(24px,4vh,40px); }
.pf-case{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(24px,4vw,48px); align-items:start;
}
.pf-case > .pf-shot{ position:sticky; top:84px; }

/* 作品画面：ブラウザ枠つきの大きなスクリーンショット */
.pf-shot{
  margin:0; border-radius:16px; overflow:hidden;
  background:var(--bg-soft);
  border:1px solid color-mix(in srgb, var(--ca, var(--accent)) 45%, transparent);
  box-shadow:0 24px 60px -28px color-mix(in srgb, var(--ca, var(--accent)) 70%, transparent);
}
.pf-shot-bar{
  display:flex; align-items:center; gap:6px; padding:9px 14px;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--panel-bd);
}
.pf-shot-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); flex:none; }
.pf-shot-bar span{
  margin-left:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--f-en); font-size:12px; color:var(--ink-dim);
}
.pf-shot-screen{ position:relative; aspect-ratio:16/10; background:#0d0e1a; }
.pf-shot-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.pf-shot--photo .pf-shot-screen img{ object-position:center; }

/* 画像が無い間の表示：作品の画面に見せかけない、明示的な「準備中」 */
.pf-shot-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; padding:16px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px);
  color:var(--ink-dim);
}
.pf-shot-empty b{ font-size:14px; color:var(--ink-soft); font-weight:700; }
.pf-shot-empty small{ font-size:12px; }
.pf-shot.is-missing img{ display:none; }

/* 作品画面がない事例：見出しと一言説明を上に通し、下を「効果」と「AI活用・詳細」の2列にする */
.pf-case--text{ grid-template-columns:1fr; }
.pf-case--text > .pf-body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto 1fr;
  column-gap:clamp(24px,4vw,48px); row-gap:16px; align-items:start;
}
.pf-case--text .pf-eyebrow,
.pf-case--text .pf-title,
.pf-case--text .pf-lead{ grid-column:1 / -1; }
.pf-case--text .pf-effect{ grid-column:1; grid-row:4 / span 2; }
.pf-case--text .pf-ai{ grid-column:2; grid-row:4; }
.pf-case--text .pf-more{ grid-column:2; grid-row:5; }

/* ---- 説明側：上から順に、必要な情報だけ ---- */
.pf-body{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.pf-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.pf-case-section .sec-index{ color:var(--ca); }
.pf-feature-badge{
  font-size:12px; font-weight:700; letter-spacing:.04em; padding:1px 10px; border-radius:20px;
  color:#0a0b14; background:var(--ca, var(--accent));
}
.pf-local-badge{
  font-size:12px; font-weight:700; padding:1px 12px; border-radius:20px;
  color:var(--ca, var(--accent)); border:1px solid color-mix(in srgb, var(--ca, var(--accent)) 55%, transparent);
}
.pf-title{ font-weight:900; font-size:clamp(24px,2.6vw,32px); line-height:1.3; margin-top:-6px; }
.pf-lead{ color:var(--ink-soft); font-size:15px; line-height:1.85; margin-top:-6px; }

/* 効果：このページでいちばん見せたい情報なので、ここだけカードにする */
.pf-effect{
  padding:14px 16px 16px; border-radius:14px;
  background:color-mix(in srgb, var(--ca, var(--accent)) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--ca, var(--accent)) 40%, transparent);
}
.pf-effect-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pf-effect-tag{
  flex:none; font-size:12px; font-weight:700; padding:1px 10px; border-radius:20px;
  color:#0a0b14; background:var(--ca, var(--accent));
}
.pf-effect h4{ font-size:14px; line-height:1.5; font-weight:700; color:var(--ink); }
.pf-cmp{ display:flex; flex-direction:column; gap:2px; }
.pf-cmp > div{ min-width:0; }
.pf-cmp-market{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px;
  padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.05);
}
.pf-cmp span{ flex-basis:100%; font-size:13px; line-height:1.55; color:var(--ink-soft); margin-bottom:2px; }
.pf-cmp-market b{
  font-size:22px; line-height:1.4; font-weight:700; color:var(--ink);
  text-decoration:line-through; text-decoration-color:rgba(255,255,255,.55); text-decoration-thickness:1px;
}
.pf-cmp small{ font-size:13px; color:var(--ink-soft); }
.pf-cmp-own small{ display:block; margin-top:3px; line-height:1.55; }
.pf-cmp-arrow{ text-align:center; line-height:1.2; font-size:14px; font-weight:700; color:var(--ca, var(--accent)); }
.pf-cmp-own{
  padding:10px 14px; border-radius:10px;
  background:color-mix(in srgb, var(--ca, var(--accent)) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--ca, var(--accent)) 55%, transparent);
}
.pf-cmp-own b{ display:block; font-size:18px; line-height:1.5; font-weight:700; color:var(--ink); }

/* AI活用ポイント：ボックスにせず、ラベル＋短い箇条書き */
.pf-ps{ display:flex; flex-direction:column; gap:8px; }
.pf-ps > div{ display:grid; grid-template-columns:3.2em 1fr; gap:10px; align-items:baseline; }
.pf-ps dt{ font-size:12px; font-weight:700; text-align:center; padding:1px 0; border-radius:20px; color:var(--ca, var(--accent)); border:1px solid color-mix(in srgb, var(--ca, var(--accent)) 55%, transparent); }
.pf-ps dd{ font-size:14.5px; line-height:1.75; color:var(--ink); }
.pf-spec{ list-style:none; display:flex; flex-direction:column; gap:4px; margin:6px 0 12px; }
.pf-spec li{ position:relative; padding-left:18px; font-size:14px; line-height:1.7; color:var(--ink-soft); }
.pf-spec li::before{ content:"・"; position:absolute; left:0; color:var(--ca, var(--accent)); }
.pf-ai h4{ font-size:13px; letter-spacing:.08em; color:var(--ca, var(--accent)); margin-bottom:6px; }
.pf-ai ul{ list-style:none; display:flex; flex-direction:column; gap:5px; }
.pf-ai li{ position:relative; padding-left:20px; font-size:14px; line-height:1.7; color:var(--ink); }
.pf-ai li::before{ content:"✦"; position:absolute; left:0; top:2px; font-size:12px; color:var(--ca, var(--accent)); }

/* リンク */
.pf-links{ display:flex; flex-wrap:wrap; gap:8px; }
.pf-links a{
  display:flex; flex-direction:column; min-width:0; max-width:100%;
  padding:8px 14px; border-radius:12px; text-decoration:none; overflow-wrap:anywhere;
  border:1px solid color-mix(in srgb, var(--ca, var(--accent)) 55%, transparent);
  transition:background .25s;
}
.pf-links a:hover{ background:color-mix(in srgb, var(--ca, var(--accent)) 16%, transparent); }
.pf-links span{ font-family:var(--f-en); font-weight:700; font-size:13px; letter-spacing:.05em; color:var(--ink); }
.pf-links span::after{ content:" ↗"; color:var(--ca, var(--accent)); }
.pf-links small{ font-size:12px; color:var(--ink-dim); }

/* 詳細：説明・費用の内訳・タグは畳んでおく */
.pf-more{ border-top:1px solid var(--panel-bd); }
.pf-more summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:12px 2px; font-size:14px; font-weight:700; color:var(--ink-soft);
}
.pf-more summary::-webkit-details-marker{ display:none; }
.pf-more summary::before{
  content:"＋"; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  font-size:14px; line-height:1; color:#0a0b14; background:var(--ca, var(--accent));
}
.pf-more[open] summary::before{ content:"－"; }
.pf-more summary:hover{ color:var(--ink); }
.pf-more-body{ display:flex; flex-direction:column; gap:12px; padding:2px 2px 6px; }
.pf-more-body > p{ font-size:14.5px; line-height:1.9; color:var(--ink-soft); }
.pf-more-body h5{ font-size:13px; color:var(--ink); }
.pf-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.pf-tags li{ font-size:12px; color:var(--ink-soft); padding:2px 12px; border-radius:20px; border:1px solid var(--panel-bd); }
.pf-effect-note{ font-size:12.5px; color:var(--ink-dim); line-height:1.7; }
.pf-effect-note a{ color:var(--ca, var(--accent)); text-underline-offset:3px; }

/* 費用相場の表 */
.pf-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pf-more table{ width:100%; border-collapse:collapse; font-size:13px; line-height:1.6; }
.pf-more th, .pf-more td{ padding:8px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--panel-bd); }
.pf-more thead th{ font-size:12px; color:var(--ink-dim); font-weight:700; background:rgba(255,255,255,.04); }
.pf-more tbody tr:nth-child(even){ background:rgba(255,255,255,.025); }
.pf-more td{ color:var(--ink-soft); }
.pf-more td:nth-child(2){ white-space:nowrap; color:var(--ink); font-weight:700; }

/* ---- 本文中のリンク ---- */
.pf-inline-link{ color:var(--accent); transition:color 1s; }

/* ---- 自社AI開発の強み ---- */
.pf-strength-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pf-strength{
  padding:22px 22px 24px; border-radius:18px;
  background:var(--panel); border:1px solid var(--panel-bd); border-top:3px solid var(--accent);
  transition:border-color 1s;
}
.pf-strength-no{ font-family:var(--f-en); font-weight:700; font-size:13px; letter-spacing:.12em; color:var(--accent); transition:color 1s; }
.pf-strength h3{ font-size:17px; line-height:1.5; margin:8px 0 8px; }
.pf-strength p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }
.pf-caution{
  margin-top:18px; padding:20px 24px; border-radius:16px;
  background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.45); border-left:4px solid #f5a623;
}
.pf-caution h3{ font-size:16px; color:#f5a623; margin-bottom:6px; line-height:1.5; }
.pf-caution p{ font-size:14.5px; color:var(--ink-soft); line-height:1.85; }
.pf-caution b{ color:var(--ink); }

/* ---- AIとのつくり方：4ステップを横に並べる ---- */
.portfolio .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.portfolio .steps li{ flex-direction:column; gap:12px; padding:20px 20px 22px; }
.portfolio .steps h4{ font-size:16px; line-height:1.5; }
.portfolio .steps p{ font-size:14px; line-height:1.8; }

/* ---- レスポンシブ ---- */
@media (max-width:1000px){
  .portfolio .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .pf-case--text > .pf-body{ display:flex; flex-direction:column; align-items:stretch; gap:16px; }
  .pf-index{ grid-template-columns:repeat(2,1fr); }
  .pf-case{ grid-template-columns:1fr; gap:20px; }
  .pf-case > .pf-shot{ position:relative; top:auto; }
  .pf-strength-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .pf-stats{ gap:10px; }
  .pf-stats li{ min-width:0; flex:1; padding:12px 6px; }
  .pf-index{ grid-template-columns:1fr; gap:8px; }
  .pf-index-card{ padding:12px 14px; }
  .pf-index-card h3{ flex-basis:auto; font-size:15px; }
  .pf-case-section{ padding-block:20px; }
  .pf-body{ gap:14px; }
  .pf-cmp-market b{ font-size:18px; }
  .pf-cmp-own b{ font-size:17px; }
  .portfolio .steps{ grid-template-columns:1fr; }
  .pf-caution{ padding:16px 16px; }

  /* 表はカード表示：行ごとに「項目名：内容」で縦に並べる */
  .pf-more thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .pf-more table, .pf-more tbody, .pf-more tr, .pf-more td{ display:block; }
  .pf-more tbody tr{
    margin-bottom:10px; padding:10px 12px; border:1px solid var(--panel-bd); border-radius:12px;
    background:rgba(255,255,255,.03) !important;
  }
  .pf-more td{ padding:3px 0; border:0; display:flex; gap:10px; }
  .pf-more td::before{
    content:attr(data-label); flex:0 0 8em; font-size:12px; font-weight:700; color:var(--ink-dim);
  }
  .pf-more td:nth-child(2){ white-space:normal; }
}