/* =========================================================
   design.projectdo.jp  デザイン制作ポータル  assets/css/portal.css  v20260916a
   配色は本社サイト（WEBサイト｜プロジェクトドゥ本社 / style.css）のトークンを踏襲。
   light 固定（本社サイトと同じ方針）。
   ========================================================= */
:root{
  /* ブランド：ロゴの惑星ティール（本社サイトと同値） */
  --brand:#0A9F97; --brand-deep:#06736E; --brand-tint:#E4F4F2; --brand-ink:#0C4C48;
  --ground:#F4F8F7; --surface:#FFFFFF; --surface-2:#EAF1EF;
  --ink:#12302E; --ink-soft:#4B615F; --ink-mute:#7C918E; --line:#D6E3E0;
  /* 紙 */
  --paper:#FFFFFF; --paper-edge:#DCE6E4;
  --shadow-card:0 1px 2px rgba(18,48,46,.04), 0 10px 30px rgba(18,48,46,.07);
  --shadow-sheet:0 1px 1px rgba(18,48,46,.10), 0 10px 22px rgba(18,48,46,.16);
  --shadow-sheet-up:0 2px 3px rgba(18,48,46,.10), 0 20px 36px rgba(18,48,46,.22);
  --display:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --sans:"Noto Sans JP",sans-serif;
  --latin:"Outfit","Noto Sans JP",sans-serif;
  --fc:var(--brand-deep); --fc-dot:var(--brand);
  --hh:66px; --stage-h:clamp(262px,25vw,330px);
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 64px)}
body{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--ground);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
li{list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.38;letter-spacing:.02em;text-wrap:balance}
/* 日本語は文節ごとに折り返す（語の途中で割らない） */
.wr{display:inline-block}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1140px;margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:#fff;padding:8px 14px;z-index:100;border-radius:4px}
.skip:focus{left:8px}

/* 「進む」「外部サイトへ」は上を向いた CSS シェブロン。矢印記号は使わない。
   rotate(-45deg) は形そのものなので hover の transform でも必ず書く。 */
.btn--ext::after{content:"";display:inline-block;flex:0 0 auto;width:.45em;height:.45em;
  border-style:solid;border-color:currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(-45deg);transition:transform .2s}
.btn--ext:hover::after,.btn--ext:focus-visible::after,.card:hover .go::after{transform:translateX(2px) rotate(-45deg)}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1140px;margin:0 auto;padding:11px 24px}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand img{width:34px;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1.25}
.brand__txt b{font-family:var(--display);font-weight:700;font-size:.99rem;letter-spacing:.06em}
.brand__txt small{font-size:.66rem;color:var(--ink-soft);letter-spacing:.06em}
.hlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
  font-size:.86rem;color:var(--brand-deep);border:1px solid var(--line);background:var(--surface);
  padding:9px 17px;border-radius:999px;transition:.2s;white-space:nowrap}
.hlink:hover{border-color:var(--brand);background:var(--brand-tint)}

/* ===== ページの見出し =====
   社内確認用のページなので、うたい文句・大きな見出し・飾り（角トンボ）は置かない。
   出すのは「何の一覧か」「何点あるか」「検索に出ないこと」の3つだけ（施主指示 2026-09-16）。 */
.pagehead{padding-block:clamp(26px,3.4vw,38px) clamp(18px,2.4vw,26px)}
.pagehead h1{font-size:clamp(1.28rem,2.4vw,1.55rem);letter-spacing:.04em}
.meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:2px 22px;
  font-size:.84rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.meta b{font-family:var(--latin);font-weight:600;color:var(--ink);font-size:.94rem}
.note{margin-top:10px;font-size:.78rem;color:var(--ink-soft)}

/* ===== filter ===== */
.filterbar{position:sticky;top:var(--hh);z-index:50;background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:11px}
.filterbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:.83rem;
  color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;cursor:pointer;transition:.18s;line-height:1.4}
/* 施設の丸印。節の見出しの丸印と同じ色で、どの施設か目でつながるようにする */
.chip[style*="--fc-dot"]::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--fc-dot);transition:background .18s}
.chip span{font-family:var(--latin);font-weight:600;font-size:.72rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.chip:hover:not(:disabled){border-color:var(--brand);color:var(--brand-deep)}
.chip.is-on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.chip.is-on span{color:color-mix(in srgb,#fff 72%,transparent)}
.chip.is-on::before{background:#fff}
/* まだ1点も無い施設。分類そのものは見せたいので、隠さずに押せなくする */
.chip:disabled{opacity:.45;cursor:default}
.chips__result{font-size:.76rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ===== works ===== */
.works{padding-block:clamp(38px,5vw,60px) clamp(64px,8vw,96px)}
/* 節の間隔は margin ではなく gap。しぼりこみで節を隠したとき、
   隣接セレクタの margin だと空白だけが残ってしまう。 */
.works .wrap{display:flex;flex-direction:column;gap:clamp(48px,6vw,76px)}
.group__head{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:18px;row-gap:2px;padding-bottom:14px;border-bottom:2px solid var(--fc);margin-bottom:26px}
.group__head h2{font-size:clamp(1.12rem,2.2vw,1.4rem);color:var(--fc);display:flex;align-items:center;gap:11px}
.gt{display:block}
.group__head h2::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--fc-dot);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--fc-dot) 18%,transparent)}
.group__sub{grid-column:1;font-size:.79rem;color:var(--ink-soft);padding-left:22px}
.group__count{grid-row:1;grid-column:2;font-family:var(--latin);font-weight:600;font-size:.78rem;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}

.grid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:640px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ----- card ----- */
.card{display:flex;flex-direction:column;height:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .2s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--fc) 34%,var(--line));
  box-shadow:0 2px 4px rgba(18,48,46,.05), 0 20px 42px rgba(18,48,46,.13)}
.card:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* 刷り見本の台：やわらかい光の中に紙が置いてある */
.stage{position:relative;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;height:var(--stage-h);min-height:0;overflow:hidden;padding:20px 22px;
  container-type:size;
  background:
    radial-gradient(ellipse 66% 58% at 50% 42%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 76%),
    linear-gradient(168deg, #E7F0EE 0%, #D8E6E3 100%);
  border-bottom:1px solid var(--line)}

.tag{position:absolute;left:14px;top:14px;z-index:3;font-family:var(--display);font-weight:700;
  font-size:.68rem;letter-spacing:.09em;color:var(--brand-ink);background:color-mix(in srgb,#fff 88%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);border-radius:999px;padding:3px 11px;line-height:1.6}
.tag--open{left:auto;right:14px;color:#8A4A17;border-color:#E4B384;background:color-mix(in srgb,#FFF6EC 92%,transparent)}

/* 紙。data-pages が 2 以上なら下に重なりが見える */
/* 紙は「台の高さ」と「台の幅」の小さいほうに合わせる。
   高さだけで決めると、横長（A4 横）のとき幅からはみ出して両端が切れる。 */
.sheet{position:relative;height:84%;aspect-ratio:var(--ar,.707);max-width:100%}
.win{width:100%}
@supports (height:1cqh){
  .sheet{height:min(94cqh, calc(94cqw / var(--ar,.707)))}
  .win{width:min(96cqw, calc((94cqh - 27px) * 1.6))}
}
.sheet img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;border-radius:2px;
  border:1px solid var(--paper-edge);box-shadow:var(--shadow-sheet);background:var(--paper);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.sheet::before,.sheet::after{content:"";position:absolute;inset:0;z-index:1;
  background:var(--paper);border:1px solid var(--paper-edge);border-radius:2px;
  box-shadow:0 5px 12px rgba(18,48,46,.10)}
.sheet::before{transform:translate(5px,6px)}
.sheet::after{transform:translate(10px,12px)}
.sheet[data-pages="1"]::before,.sheet[data-pages="1"]::after,
.sheet[data-pages="2"]::after{display:none}
.card:hover .sheet img{transform:translateY(-9px);box-shadow:var(--shadow-sheet-up)}

/* WEB は紙ではなくウィンドウで見せる */
.win{position:relative;max-width:100%;border-radius:8px;overflow:hidden;
  border:1px solid var(--paper-edge);box-shadow:var(--shadow-sheet);background:var(--paper);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.card:hover .win{transform:translateY(-9px);box-shadow:var(--shadow-sheet-up)}
.win__bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  background:#EFF4F3;border-bottom:1px solid var(--paper-edge)}
.win__bar i{width:7px;height:7px;border-radius:50%;background:#CBD8D6;flex:none}
.win__bar em{font-family:var(--latin);font-style:normal;font-weight:500;font-size:.58rem;
  color:var(--ink-mute);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}

/* 仕様の帯（印刷の指示書きの感じ） */
.spec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 20px;background:var(--brand-tint);border-bottom:1px solid var(--line)}
.spec__form{font-family:var(--display);font-weight:700;font-size:.76rem;color:var(--brand-ink);letter-spacing:.02em}
.spec__mm{font-family:var(--latin);font-weight:600;font-size:.74rem;color:var(--brand-deep);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}

.card__body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 16px;flex:1}
/* どの催し・案件のものか。施設でまとめた中で、ひとかたまりの仕事を見分けるための行 */
.card__pj{font-size:.71rem;font-weight:500;letter-spacing:.02em;color:var(--fc);
  margin-bottom:-4px;line-height:1.5}
.card__body h3{font-size:1.06rem;line-height:1.5}
.card__body p{font-size:.86rem;color:var(--ink-soft);line-height:1.78}

.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 20px;border-top:1px dashed var(--line);margin-top:auto}
.host{font-family:var(--latin);font-weight:500;font-size:.68rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.host__path{font-weight:600;color:var(--ink)}
.go{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;
  font-size:.85rem;color:var(--fc);white-space:nowrap;flex:none}

.empty{text-align:center;color:var(--ink-soft);font-size:.9rem;padding:48px 0}

/* ===== footer ===== */
.site-footer{background:#0E2422;color:#CFE0DD;padding-block:clamp(40px,5vw,56px) 26px;font-size:.86rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media (min-width:760px){ .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px} }
.flogo{width:196px;margin-bottom:14px}
.site-footer h3{font-size:.86rem;color:#fff;margin-bottom:8px;letter-spacing:.06em}
.site-footer p{line-height:1.85;color:#A9C3BF}
.copy{margin-top:30px;padding-top:18px;border-top:1px solid #1E3B38;font-size:.74rem;color:#7C9B97}

/* ===== カードの立ち上がり ===== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cell.is-pending{opacity:0;transform:translateY(18px)}
.cell.is-in{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}

/* ===== スマートフォン ===== */
@media (max-width:719px){
  body{font-size:15.5px}
  :root{--stage-h:308px}
  .hbar{padding:10px 18px}
  .brand__txt small{display:none}
  .wrap{padding-inline:16px}
  .pagehead{padding-block:22px 16px}
  .meta{gap:2px 16px}
  .filterbar .wrap{gap:8px}
  .chips__result{width:100%}
  .group__head{position:relative;grid-template-columns:1fr;row-gap:3px}
  .group__count{position:absolute;right:0;top:3px}
  .group__head h2{align-items:flex-start;padding-right:3.4em}
  .group__head h2::before{margin-top:.52em}
  .group__sub{padding-right:3.4em}
  .stage{padding:18px}
  .card__body h3{font-size:1.02rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .cell.is-pending{opacity:1;transform:none}
  .card:hover{transform:none}
  .card:hover .sheet img,.card:hover .win{transform:none}
}

/* 印刷（このページを刷る用事はまず無いが、出したときに読める形に） */
@media print{
  .site-header,.filterbar,.skip{display:none}
  body{background:#fff}
  .card{break-inside:avoid;box-shadow:none}
  .cell.is-pending{opacity:1;transform:none}
}