@charset "utf-8";
/* ================================================================
   page-service.css — 設備・めっき(service.html)専用。site.css → process.css の後に読む
   1. ページの頭: 写真の代わりに「このページの内容」(節の要点+飛び先)を右に置く
   2. 対応できるめっき: 2006 年の切替(左の見出しの下)と、仕様表+断面図(右)
   3. 2 つのライン: カードの下に「どちらのラインに出すかの目安」
   4. 設備の写真: 4 枚を切り抜かずに、高さをそろえて並べる
   5. 排水処理: 短い年表とリンクの間合い
   色は site.css の変数だけを使う。ミントは使わない(図の中だけの色のため)
   ================================================================ */

/* ---------------------------------------------------------------- 1. ページの頭+このページの内容 */
.page-head--toc .page-head__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end}
.toc{justify-self:end;width:100%;max-width:640px}
.toc__title{font-size:13.5px;line-height:1.6;color:var(--ink-2);letter-spacing:.08em}
.toc__list{list-style:none;margin-top:10px;border-top:1px solid var(--rule)}
.toc__list li{border-bottom:1px solid var(--rule)}
.toc__list a{display:grid;grid-template-columns:8.6em minmax(0,1fr);gap:2px 20px;align-items:baseline;padding:12px 2px;text-decoration:none}
.toc__name{font-family:var(--mincho);font-weight:700;font-size:17px;line-height:1.5;letter-spacing:.04em;font-feature-settings:"palt";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;white-space:nowrap}
.toc__list a:hover .toc__name{text-decoration-thickness:2px}
.toc__fact{font-family:var(--fig);font-size:14.5px;line-height:1.6;color:var(--ink-2);letter-spacing:.03em}
.toc__line{display:block}

/* ---------------------------------------------------------------- 2. 対応できるめっき */
/* 2006 年の全面切替: 見出しの下に、紺の縦線と大きな年(年表の年と同じ明朝) */
.switch{margin-top:36px;padding:2px 0 2px 20px;border-left:2px solid var(--navy)}
.switch .switch__date{margin-top:0;max-width:none}
.switch__date time{display:flex;align-items:baseline;gap:.35em;font-size:15px;color:var(--ink-2);letter-spacing:.06em;white-space:nowrap}
.switch__date b{font-family:var(--mincho);font-size:clamp(32px,3vw,40px);font-weight:600;line-height:1.1;color:var(--navy);letter-spacing:.02em}
.switch .switch__text{margin-top:10px;max-width:22em;font-size:15.5px;line-height:1.85;color:var(--navy)}
.switch__text strong{display:block;margin-bottom:4px;font-weight:700}
/* 仕様表の下に断面図(トップと同じ部品) */
.plating .coat{margin-top:40px}

/* ---------------------------------------------------------------- 3. どちらのラインに出すかの目安 */
.choose{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8.4fr);gap:20px 48px;align-items:start;margin-top:clamp(56px,6vw,80px)}
.choose__title{font-size:clamp(1.25rem,1.55vw,1.42rem);line-height:1.55}
.choose__list{border-top:1px solid var(--rule)}
/* 2 行で矢印とライン名の位置をそろえるため、右の列は固定幅 */
.choose__list>div{display:grid;grid-template-columns:minmax(0,1fr) 18.5em;gap:8px 28px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.choose__list dt{line-height:1.75;word-break:auto-phrase}
.choose__list dd{display:flex;align-items:center;gap:18px}
.choose__arrow{flex:none;width:56px;height:12px;overflow:visible}
.choose__arrow path{fill:none;stroke:var(--navy);stroke-width:1.4}
.choose__arrow .head{fill:var(--navy);stroke:none}
.choose__line{font-family:var(--mincho);font-weight:700;font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.4;letter-spacing:.04em;font-feature-settings:"palt";white-space:nowrap}
.choose__note{margin-top:16px;font-size:15px;color:var(--ink-2)}

/* ---------------------------------------------------------------- 4. 設備の写真
   縦の写真(2:3)と正方形の写真を、切り抜かずに同じ高さで並べる。
   幅の比を 縦 2 : 正方形 3 にすると高さがそろう(PC は 1 列に 4 枚 = 2+3+3+2、1180 未満は 2 枚ずつ = 2+3) */
.gallery{display:flex;gap:24px;align-items:flex-start}
.gallery__item{flex:0 1 calc((100% - 72px) * .3);min-width:0}
.gallery__item--tall{flex-basis:calc((100% - 72px) * .2)}
.gallery__item img{width:100%}
.gallery__item figcaption{margin-top:12px}

/* ---------------------------------------------------------------- 5. 排水処理 */
.wastewater__years{margin-top:28px}
.wastewater__more{margin-top:28px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1179.98px){
  .gallery{flex-wrap:wrap;row-gap:40px}
  .gallery__item{flex-basis:calc((100% - 24px) * .6 - .1px)}
  .gallery__item--tall{flex-basis:calc((100% - 24px) * .4 - .1px)}
}

@media (max-width:960px){
  .page-head--toc .page-head__in{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc{justify-self:stretch;max-width:none}
  .switch{margin-top:24px}
  .plating .coat{margin-top:32px}
  .choose{grid-template-columns:minmax(0,1fr);gap:16px}
}

@media (max-width:599.98px){
  .toc__list a{grid-template-columns:minmax(0,1fr);gap:0;padding:10px 2px 11px}
  .toc__name{font-size:16.5px}
  .toc__fact{font-size:14px}
  .choose__list>div{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0 16px}
  .choose__list dd{min-width:0;gap:12px}
  .choose__arrow{width:36px}
  .gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
}