/* 目的別の案内（/for-companies 北杜でワーケーション、/trade 旅行会社・メディアの方へ）。指示書 10。
   仕事の相手に渡す資料として読めるように、要点を表と一覧に整え、箱を減らす。
   parts.css の後に読み込む。色は tokens.css の変数（parts.css の --ds-*）だけを使う。 */

/* ---------- 頭の下の送り（このページで分かること） ---------- */
.silver main :is(.page-toc ul, .page-intro__links) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 0;
  margin: var(--s-4) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--ds-rule); border-bottom: 1px solid var(--ds-rule);
}
.silver main :is(.page-toc li, .page-intro__links li) { margin: 0; padding: 0; }
.silver main :is(.page-toc li, .page-intro__links li) + li { border-left: 1px solid var(--ds-rule); }
.silver main :is(.page-toc a, .page-intro__links a) {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-n2);
  min-height: 64px; padding: var(--s-n2) var(--s-0);
  color: var(--ds-sumi); font-size: var(--s-n1); font-weight: 700; line-height: var(--lh-head); text-decoration: none;
}
.silver main :is(.page-toc li:first-child a, .page-intro__links li:first-child a) { padding-left: 0; }
.silver main :is(.page-toc a, .page-intro__links a)::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.silver main :is(.page-toc a, .page-intro__links a):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .page-intro { margin-block: var(--s-0) 0; }
@media (max-width: 767px) {
  .silver main :is(.page-toc ul, .page-intro__links) { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-1); }
  .silver main :is(.page-toc li, .page-intro__links li) + li { border-left: 0; border-top: 1px solid var(--ds-rule); }
  .silver main :is(.page-toc a, .page-intro__links a) { min-height: 48px; padding: var(--s-n4) 0; }
}

/* 「施設確認中」は隠さずに見せる（Takeru 11/10：情報を集めている途中だと分かるように）。
   施設ページと同じく、札の形にせず薄い字で書く */
.silver main .tag--unknown { display: inline; padding: 0; border: 0; background: none; color: var(--ds-muted); font-size: var(--s-n1); font-weight: 400; letter-spacing: .04em; }
.silver main :is(.facts, .card__facts, dl) > div:has(.tag--unknown) { display: grid; }
.silver main td:has(> .tag--unknown:only-child)::before { content: none; }

/* ================= /for-companies ================= */

/* 北杜で働く：文（左）と、東京からの行き方の面（右）を 1.414 : 1 で */
.silver main .section--work-intro { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
.silver main .section--work-intro > .section__title { grid-column: 1 / -1; }
.silver main .section--work-intro > p { grid-column: 1; margin: 0 0 var(--s-0); }
.silver main .section--work-intro > p:last-child { margin-bottom: 0; }
.silver main .section--work-intro > .access-strip {
  grid-column: 2; grid-row: 2 / span 2; display: grid; gap: var(--s-0); margin: 0; padding: var(--s-1);
  border-radius: 4px; background: var(--ds-face); font-size: inherit;
}
.silver main .section--work-intro .access-strip li { margin: 0; padding: 0; text-indent: 0; }
.silver main .section--work-intro .access-strip li + li { padding-top: var(--s-0); border-top: 1px solid var(--ds-rule); }
.silver main .section--work-intro .access-strip strong { display: block; width: auto; margin-bottom: var(--s-n4); color: var(--ds-muted); font-size: var(--s-n1); font-weight: 400; line-height: var(--lh-head); }
@media (max-width: 899px) {
  .silver main .section--work-intro { grid-template-columns: minmax(0, 1fr); }
  .silver main .section--work-intro > .access-strip { grid-column: 1; grid-row: auto; margin-bottom: var(--s-0); padding: var(--s-0); }
}

/* 仕事ができる宿：PC は4枚を1段。写真 1.414 : 1、名前、要点（Wi-Fi・個室） */
.silver main .card-grid--small { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-1); }
.silver main .card--work { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; }
.silver main .card--work .card__link { display: block; color: inherit; text-decoration: none; }
.silver main .card--work .media { aspect-ratio: 1.414 / 1; margin: 0 0 var(--s-n2); }
.silver main .card--work .card__kicker { margin: 0 0 var(--s-n4); color: var(--ds-muted); font-weight: 400; }
.silver main .card--work .card__title { margin: 0; font-size: var(--s-0); line-height: var(--lh-head); letter-spacing: .04em; }
.silver main .card--work .card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .card--work .card__facts { display: grid; gap: 0; margin: var(--s-n2) 0 0; padding: var(--s-n4) 0 0; border-top: 1px solid var(--ds-rule); }
.silver main .card--work .card__facts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--s-n2); align-items: baseline; }
.silver main .card--work .card__facts :is(dt, dd) { margin: 0; font-size: var(--s-n1); line-height: var(--lh-body); }
.silver main .card--work .card__facts dt { color: var(--ds-muted); font-weight: 400; }
.silver main .section--work-places > p:last-child { margin-top: var(--s-4); margin-bottom: 0; }
@media (max-width: 1023px) {
  .silver main .card-grid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-n2); }
}
/* スマホは TOP の宿の列と同じく、横に送る1列（次のカードが少し見える） */
@media (max-width: 559px) {
  .silver main .card-grid--small { grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; gap: var(--s-n2); width: auto; margin-inline: 0; padding: 0 var(--gutter) var(--s-n2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
  .silver main .section--work-places { width: 100%; }
  .silver main .section--work-places > :not(.card-grid) { width: var(--wrap); margin-inline: auto; }
  .silver main .card--work { scroll-snap-align: start; }
  .silver main .section--work-places > p:last-child { margin-top: var(--s-0); }
}

/* 海外からのゲストを迎えるとき：箱をやめ、項目名・一文・送り先の一覧に */
.silver main .entry-grid--q { display: block; border-top: 1px solid var(--ds-rule); }
.silver main .entry--q {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.414fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline;
  padding: var(--s-1) 0; border: 0; border-bottom: 1px solid var(--ds-rule); border-radius: 0;
}
.silver main .entry--q h3 { margin: 0; font-size: var(--s-0); }
.silver main .entry--q p { margin: 0; }
.silver main .entry--q p:last-child { justify-self: end; text-align: right; font-size: var(--s-n1); }
.silver main .entry--q p:last-child a { color: var(--ds-sumi); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (max-width: 899px) {
  .silver main .entry--q { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-n4); padding: var(--s-0) 0; }
  .silver main .entry--q p:last-child { justify-self: start; text-align: left; }
}

/* 施設ごとにわかること：PC は表（確認日は細い列）。スマホは項目ごとの短い一覧 */
.silver main #venues .info-table th[scope="row"] { width: 9em; }
.silver main #venues .info-table :is(thead th:last-child, td:last-child) { width: 7em; white-space: nowrap; color: var(--ds-muted); font-size: var(--s-n1); font-variant-numeric: tabular-nums; }
.silver main #venues .info-table td:nth-of-type(2) { font-size: var(--s-n1); }
.silver main #venues .info-table td a { color: var(--ds-sumi); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main #venues .table-wrap + .note { margin: var(--s-n2) 0 var(--s-1); }
@media (max-width: 767px) {
  .silver main #venues .info-table tr { padding: var(--s-n2) 0; }
  .silver main #venues .info-table tbody th { width: auto; margin: 0; }
  .silver main #venues .info-table td[data-label] { display: block; width: auto; padding: 0; }
  .silver main #venues .info-table td[data-label]::before { content: none; }
  .silver main #venues .info-table td:nth-of-type(2), .silver main #venues .info-table td:last-child { display: inline; color: var(--ds-muted); font-size: var(--s-n2); }
  .silver main #venues .info-table td:last-child { white-space: nowrap; }
  .silver main #venues .info-table td:last-child::before { content: "　" attr(data-label) " "; display: inline; width: auto; padding: 0; font-size: inherit; }
}

/* 旅の組み方：2つを横に並べ、丸ごと任せる（プライベートツアー）を蒼の面に */
.silver main .entry-grid--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.silver main .entry-grid--two > .entry { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-0); margin: 0; padding: var(--s-4); border: 0; border-radius: 4px; }
.silver main .entry-grid--two > .entry > * { margin: 0; }
.silver main .entry-grid--two > .entry h3 { font-size: var(--ds-h2); letter-spacing: .04em; }
.silver main .entry-grid--two > .entry > p:has(> .btn) { margin-top: auto; padding-top: var(--s-n2); }
.silver main .entry-grid--two .btn { min-width: 15em; justify-content: center; }
.silver main .entry--all { background: var(--ds-band); color: var(--ds-band-text); }
.silver main .entry--all :is(h3, p, li, a) { color: inherit; }
.silver main .entry--all .btn--primary { background: var(--semantic-color-surface-default); border-color: var(--semantic-color-surface-default); color: var(--ds-band); }
.silver main .entry--all .btn--primary:hover { background: var(--ds-tint); border-color: var(--ds-tint); color: var(--ds-band); }
.silver main .entry--all :focus-visible { outline-color: var(--ds-band-text); }
.silver main .entry--self { background: var(--ds-face); }
/* 2枚とも同じ骨組み：見出し、ひとこと、線で区切った3行、下端にボタン（11/10 Takeru「組み方が雑」） */
.silver main .entry-grid--two > .entry > .entry__facts { align-self: stretch; margin: var(--s-n2) 0 0; padding: 0; border-top: 1px solid var(--entry-rule); }
.silver main .entry__facts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: var(--s-0); align-items: baseline; padding: var(--s-n1) 0; border-bottom: 1px solid var(--entry-rule); }
.silver main .entry__facts dt { font-size: 15px; line-height: var(--lh-body); color: var(--entry-soft); }
.silver main .entry__facts dd { margin: 0; }
.silver main .entry__facts a { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .entry--self { --entry-rule: var(--ds-rule); --entry-soft: var(--ds-muted); }
.silver main .entry--all { --entry-rule: color-mix(in srgb, var(--ds-band-text) 28%, transparent); --entry-soft: var(--ds-tint); }
.silver main .entry-grid--two > .entry > p:has(> .btn) { padding-top: var(--s-1); }
@media (max-width: 767px) {
  .silver main .entry-grid--two { grid-template-columns: minmax(0, 1fr); gap: var(--s-n2); }
  .silver main .entry-grid--two > .entry { padding: var(--s-1) var(--s-0); gap: var(--s-n2); }
  .silver main .entry-grid--two > .entry > p:has(> .btn) { align-self: stretch; }
  .silver main .entry-grid--two .btn { width: 100%; }
}

/* ================= /trade ================= */

/* 北杜の概要：要点を3列の表に、エリアは短い紹介を横に並べる */
.silver main .facts--sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-1); max-width: none; margin-top: var(--s-4); }
.silver main .facts--sheet > div { display: block; padding: var(--s-n2) 0 var(--s-1); border-top: 1px solid var(--ds-rule); }
.silver main .facts--sheet > div:nth-child(5) { grid-column: span 2; }
.silver main .facts--sheet > div:has(ul) { grid-column: 1 / -1; padding-bottom: 0; }
.silver main .facts--sheet dt { margin-bottom: var(--s-n4); }
.silver main .facts--sheet dd ul.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: var(--s-0) var(--s-1); margin: var(--s-n4) 0 0; padding: 0; list-style: none; }
.silver main .facts--sheet dd ul.list li { margin: 0; padding: 0 0 0 var(--s-0); border-left: 1px solid var(--ds-rule); }
.silver main .facts--sheet dd ul.list li:first-child { padding-left: 0; border-left: 0; }
.silver main .facts--sheet dd ul.list a { color: var(--ds-sumi); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (max-width: 899px) {
  .silver main .facts--sheet { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-1); }
  .silver main .facts--sheet > div:nth-child(5) { grid-column: auto; }
  .silver main .facts--sheet > div { padding: var(--s-n2) 0; }
  .silver main .facts--sheet dt { margin: 0; }
  .silver main .facts--sheet dd ul.list { grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; gap: var(--s-n2); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-n2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
  .silver main .facts--sheet dd ul.list li, .silver main .facts--sheet dd ul.list li:first-child { padding: var(--s-n2) var(--s-0) var(--s-0); border: 0; border-radius: 4px; background: var(--ds-face); scroll-snap-align: start; }
}

/* プライベートツアーの条件表：ツアーを列に、項目を行に並べて比べる */
.silver main .info-table--compare { table-layout: fixed; }
.silver main .info-table--compare thead th:first-child { width: 9em; }
.silver main .info-table--compare thead th:not(:first-child) { padding-bottom: var(--s-n2); color: var(--ds-sumi); font-size: var(--s-1); font-weight: 700; line-height: var(--lh-head); }
.silver main .info-table--compare thead a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .info-table--compare tbody th { color: var(--ds-muted); font-weight: 400; }
@media (max-width: 767px) {
  .silver main .info-table--compare thead { display: block; }
  .silver main .info-table--compare tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-n2); padding: var(--s-n2) 0; }
  .silver main .info-table--compare thead tr { padding-top: 0; border-bottom: 1px solid var(--ds-sumi); }
  .silver main .info-table--compare thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .silver main .info-table--compare thead th:not(:first-child) { display: block; padding: 0; border: 0; font-size: var(--s-0); }
  .silver main .info-table--compare tbody tr:first-child { border-top: 0; }
  .silver main .info-table--compare tbody th { grid-column: 1 / -1; margin-bottom: var(--s-n4); font-size: var(--s-n1); font-weight: 400; }
  .silver main .info-table--compare td[data-label] { display: block; width: auto; padding: 0; font-size: var(--s-n1); }
  .silver main .info-table--compare td[data-label]::before { content: none; }
  .silver main .info-table--compare:not(:has(td + td)) tr { grid-template-columns: minmax(0, 1fr); }
}

/* 団体・報奨旅行：手配できることを3つ並べ、見積りの文と相談の入口を下に */
.silver main #groups > .list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-1); margin: 0 0 var(--s-1); padding: 0; list-style: none; }
.silver main #groups > .list li { margin: 0; padding: var(--s-n2) 0 0; border-top: 1px solid var(--ds-sumi); font-weight: 700; }
.silver main #groups > p { margin: 0 0 var(--s-n2); }
@media (max-width: 767px) {
  .silver main #groups > .list { grid-template-columns: minmax(0, 1fr); }
  .silver main #groups > .list li { padding: var(--s-n2) 0; border-top: 0; border-bottom: 1px solid var(--ds-rule); }
  .silver main #groups > .list li:first-child { border-top: 1px solid var(--ds-sumi); }
}

/* 手配の流れ：順番のある5つの手順を、番号つきの1本の流れで */
.silver main .flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: fl; }
.silver main .flow__step { position: relative; display: flex; flex-direction: column; gap: var(--s-n4); margin: 0; padding: 0 var(--s-1) 0 0; border: 0; }
.silver main .flow__step::before {
  counter-increment: fl; content: counter(fl);
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s-n2);
  border-radius: 50%; background: var(--ds-band); color: var(--ds-band-text); font-size: var(--s-n1); font-weight: 700; line-height: 1;
}
.silver main .flow__step:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 36px; right: 0; height: 1px; background: var(--ds-band); }
.silver main .flow__step strong { font-size: var(--s-1); line-height: var(--lh-head); letter-spacing: .04em; }
.silver main .flow__step > span { font-size: var(--s-0); line-height: var(--lh-body); }
.silver main .flow__days { color: var(--ds-muted); font-size: var(--s-n1); }
@media (max-width: 767px) {
  .silver main .flow { grid-template-columns: minmax(0, 1fr); }
  .silver main .flow__step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s-0); row-gap: 0; padding: 0 0 var(--s-n2); }
  .silver main .flow__step:last-child { padding-bottom: 0; }
  .silver main .flow__step::before { grid-row: 1 / span 3; margin: 0; }
  .silver main .flow__step > * { grid-column: 2; }
  .silver main .flow__step strong { font-size: var(--s-0); padding-top: 4px; }
  .silver main .flow__step:not(:last-child)::after { top: 36px; bottom: 0; left: 18px; right: auto; width: 1px; height: auto; }
}

/* 資料：名前の一覧。ファイルができるまでは「作成中」と書き、リンクにしない（Takeru 11/10） */
.silver main .materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-1); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-rule); }
.silver main .materials li { margin: 0; border-bottom: 1px solid var(--ds-rule); }
.silver main .materials__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-0); min-height: 64px; padding: var(--s-n2) 0;
  color: var(--ds-sumi); font-size: var(--s-0); font-weight: 700;
}
.silver main .materials__state { flex: none; color: var(--ds-muted); font-size: var(--s-n1); font-weight: 400; }
@media (max-width: 767px) { .silver main .materials { grid-template-columns: minmax(0, 1fr); } .silver main .materials__item { min-height: 56px; } }

/* メディアの方へ：取材のテーマの写真3枚（1.414 : 1）、その下に写真・取材・プレスリリースを3列で */
.silver main #media > h3:first-of-type { margin-top: 0; }
.silver main .media-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.silver main .media-theme { display: block; color: var(--ds-sumi); text-decoration: none; }
.silver main .media-theme .media { aspect-ratio: 1.414 / 1; }
.silver main .media-theme > span { display: block; margin-top: var(--s-n2); font-size: var(--s-0); font-weight: 700; line-height: var(--lh-head); }
.silver main .media-theme:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .media-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-6); border-top: 1px solid var(--ds-rule); border-bottom: 1px solid var(--ds-rule); }
.silver main .media-info > div { padding: var(--s-0) var(--s-1) var(--s-1); }
.silver main .media-info > div:first-child { padding-left: 0; }
.silver main .media-info > div:last-child { padding-right: 0; }
.silver main .media-info > div + div { border-left: 1px solid var(--ds-rule); }
.silver main .media-info h3 { margin: 0 0 var(--s-n2); font-size: var(--s-0); }
.silver main .media-info .facts > div { grid-template-columns: minmax(0, 1fr); }
.silver main .media-info .facts a { color: var(--ds-sumi); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .media-info .news { border-top: 0; }
.silver main .media-info .news li { display: block; padding: 0; border: 0; }
.silver main .media-info .news time { display: block; min-width: 0; color: var(--ds-muted); font-size: var(--s-n1); }
@media (max-width: 767px) {
  .silver main .media-themes { gap: var(--s-n2); }
  .silver main .media-theme > span { font-size: var(--s-n1); }
  .silver main .media-info { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); border-bottom: 0; }
  .silver main .media-info > div, .silver main .media-info > div:first-child, .silver main .media-info > div:last-child { padding: var(--s-0) 0; border-bottom: 1px solid var(--ds-rule); }
  .silver main .media-info > div + div { border-left: 0; }
  .silver main .media-info .facts > div { grid-template-columns: 6.5em minmax(0, 1fr); column-gap: var(--s-n2); }
}

/* 連絡先：線で区切った2行 */
.silver main #contact .facts { gap: 0; border-top: 1px solid var(--ds-rule); }
.silver main #contact .facts > div { padding: var(--s-n2) 0; border-bottom: 1px solid var(--ds-rule); }
.silver main #contact .facts a { color: var(--ds-sumi); text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* 章の中の文：1行は全角40字ほどまで */
.silver main section.section > p { max-width: 40em; }
.silver main p .tag--unknown { font-size: inherit; }