/* IDATSUKA — 仕事の部屋（biz.html / works.html / business.html / work-01〜06.html）だけの部品。
   css/page.css の上に重ねる。色・書体は tokens.css の変数だけ。箱・角丸・影なし、区切りは 1px の罫線。 */

/* タイトル行の下の一行の注記（Spec Works など） */
.p-biz-note { padding-bottom: clamp(32px, 4vw, 56px); }
.p-biz-note .spec-note { font-size: 12px; line-height: 1.9; letter-spacing: .08em; color: var(--c-sub); padding-left: 14px; border-left: 1px solid var(--c-accent); }

/* 作品ページへのリンクの特集（拡大ではなく移動なので、指の形） */
.p-biz-linkfeat .ed-feature-pic { cursor: pointer; }
/* 説明文の中のリンク */
.p-biz-links a { color: var(--c-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--c-accent); transition: color var(--d-1) var(--ease-calm); }
.p-biz-links a:hover { color: var(--c-accent); }
.pg-note.spec-note { padding-top: 6px; }

/* 見出しバー：英字が長いとき、スマホで見出しが1字ずつ折れないように（英字のほうを次の行へ） */
.pg-bar h2 { white-space: nowrap; }
.pg-bar-l { flex-wrap: wrap; row-gap: 4px; }

/* セクションの終わりの入口（All Projects → など） */
.p-biz-more { margin-top: 48px; }

/* 一覧の注記の行（副題の下にもう一行） */
.ed-card small.ed-cdisc { margin-top: 2px; font-size: 10.5px; opacity: .85; }
/* ポスター（縦長の静止画）の一覧は 4:5 で */
.p-biz-posters .ed-thumb { aspect-ratio: 4 / 5; }
.p-biz-posters .ed-thumb img { object-position: 50% 30%; }
/* 文字だけのカード（説明つき） */
.ed-card .p-biz-desc { display: block; margin-top: 8px; font-size: 12px; line-height: 1.9; letter-spacing: .04em; color: var(--c-sub); }
/* 特集の「Spec」の印・拡大表示の Spec の行 */
.g-lb-meta .g-spec { display: block; margin-top: 4px; font-family: var(--f-serif); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #A69E92; }
.g-lb-meta .g-disclaimer { color: #A69E92; }

/* Digital Products：テンプレートの表紙（16:9、横並び） */
.p-biz-tmpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; margin-top: 40px; }
.p-biz-tmpl a { display: block; border-top: 1px solid var(--c-fg); padding-top: 10px; text-decoration: none; }
.p-biz-tmpl span.p-biz-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.p-biz-tmpl img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-3) var(--ease-calm); }
.p-biz-tmpl a:hover img { transform: scale(1.025); }
.p-biz-tmpl b { display: block; margin-top: 10px; font-family: var(--f-serif); font-weight: 400; font-size: 13px; letter-spacing: .28em; color: var(--c-sub); transition: color var(--d-1) var(--ease-calm); }
.p-biz-tmpl a:hover b { color: var(--c-accent); }
@media (max-width: 420px) { .p-biz-tmpl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } }

/* business.html：料金の行（金額を大きめに） */
.p-biz-price .pg-rt b { display: block; margin-top: 6px; font-family: var(--f-serif); font-weight: 400; font-size: 26px; letter-spacing: .06em; color: var(--c-fg); }
.p-biz-price .p-biz-badge { display: inline-block; margin-left: 10px; font-family: var(--f-serif); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-accent); vertical-align: middle; }
/* 英字の見出し（Business.）は字間を詰めて、スマホでもはみ出さないように */
.pg-title h1.p-biz-h1en { font-family: var(--f-serif); font-weight: 300; letter-spacing: .04em; }

/* よくある質問（開閉。文字と罫線だけ） */
.p-biz-faq { border-top: 1px solid var(--c-line); margin-top: 8px; }
.p-biz-faq details { border-bottom: 1px solid var(--c-line); }
.p-biz-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0;
  font-family: var(--f-mincho); font-size: 17px; letter-spacing: .06em; line-height: 1.7; transition: color var(--d-1) var(--ease-calm); }
.p-biz-faq summary::-webkit-details-marker { display: none; }
.p-biz-faq summary:hover { color: var(--c-accent); }
.p-biz-faq summary::after { content: '+'; flex-shrink: 0; font-family: var(--f-serif); font-size: 20px; color: var(--c-accent); transition: transform var(--d-1) var(--ease-calm); }
.p-biz-faq details[open] summary::after { transform: rotate(45deg); }
.p-biz-faq p { padding-bottom: 26px; max-width: 44em; font-size: 14px; line-height: 2.05; color: var(--c-sub); }

/* work-01〜06：プロジェクトの詳細 */
.p-biz-head .ed-dl { margin-top: 32px; }
.p-biz-head .ed-dl div { grid-template-columns: 6em 1fr; }
.p-biz-head .p-biz-note { padding: 22px 0 0; }
.p-biz-visual { padding-bottom: clamp(56px, 7vw, 96px); }
.p-biz-visual img, .p-biz-visual video { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.p-biz-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: clamp(48px, 6vw, 80px) 0; }
.p-biz-gallery figure, .p-biz-full { border-top: 1px solid var(--c-fg); padding-top: 12px; }
.p-biz-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-biz-full { margin: clamp(48px, 6vw, 80px) 0; }
.p-biz-full img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.p-biz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.p-biz-stats li { border-top: 1px solid var(--c-fg); padding-top: 16px; }
.p-biz-stats b { display: block; font-family: var(--f-serif); font-weight: 300; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: .04em; color: var(--c-accent); }
.p-biz-stats span { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .1em; line-height: 1.8; color: var(--c-sub); }
.p-biz-pager { margin-top: clamp(56px, 7vw, 96px); }
@media (max-width: 760px) {
  .p-biz-visual img, .p-biz-visual video, .p-biz-full img { aspect-ratio: 16 / 9; }
  .p-biz-gallery { grid-template-columns: 1fr; }
  .p-biz-stats { grid-template-columns: 1fr; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-biz-tmpl img, .p-biz-tmpl b, .p-biz-faq summary, .p-biz-faq summary::after { transition: none; }
  .p-biz-tmpl a:hover img { transform: none; }
}