/*
  Libist 制作テンプレート ｜ 建築設計事務所（architecture-office / quiet-typography）v3
  用途: 建築・住宅設計・小規模建築事務所向け。libist.jp の「制作実績」用。

  v2方針（維持）: 背景色は単色（白 --paper 一色）で統一し、セクションの区切りは色帯の
  切り替えではなく「余白の大きさ」と「1px罫線」だけで表現する。eyebrow+大見出しの定型は
  使わず、hero は極端な余白の中に社名とごく短い一文だけを置くタイポグラフィ中心の構成。
  作品ギャラリーは均等3カラムではなく grid-column: span で大小混在させる非対称グリッド。
  カード化（枠で囲む）は一切行わない。CTA帯も廃止し、控えめなテキストリンクのみ。

  v3 追加方針（2026-07-28、3回目の作り直し。石橋さん指摘「実在サイトを検索して参照する
  工夫が欲しい」対応）: 実在の建築設計事務所サイトに共通する構造的特徴——ナビゲーションは
  「見えない」ほど控えめにし、作品そのものへの最短導線を最優先する／タイポグラフィは
  作品を邪魔せず額装するように機能する——を抽出して反映。固定ヘッダーはガラス質のぼかしや
  下線アニメーションを廃し色の濃淡だけで状態を示す。作品ギャラリーは押しても何も起きない
  「見せかけの絞り込みタブ」を廃止し、実際にその場へ飛ぶカテゴリ別の実アンカーに置き換えた。
  実在の設計事務所・建築家を模したりロゴ・文言・作品写真を借用したりはしていない。

  同ショーケース内の他サイトとは意図的に骨格を分ける（帯構成・カードグリッド・
  アコーディオンFAQ・数字3つ横並び・濃色CTA帯のいずれも使わない）。
  デモ屋号「LINEA ARCHITECTS」は架空。JSは一切使用しない。
*/

:root{
  /* ---- 配色（差し替えはここだけ） ---- */
  --paper:#FFFFFF;       /* ページ全体の地。単色で統一する（帯構成は使わない） */
  --ink:#151513;         /* 本文・見出し */
  --ink-70:rgba(21,21,19,.68);
  --ink-45:rgba(21,21,19,.45);
  --ink-30:rgba(21,21,19,.3);
  --line:rgba(21,21,19,.15);
  --line-soft:rgba(21,21,19,.08);
  --stone:#8C877D;       /* 唯一の差し色。彩度を抑えた石灰色。下線・数字等最小限に使用 */
  /* ---- フォント ---- */
  --f-en:'Jost',sans-serif;
  --f-jp:'Noto Sans JP',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-jp);font-weight:300;color:var(--ink);background:var(--paper);
  line-height:2;font-size:15px;-webkit-font-smoothing:antialiased;letter-spacing:.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}
.narrow{max-width:640px}
.en{font-family:var(--f-en);letter-spacing:.14em}

/* ---- 汎用パーツ ---- */
.label{font-family:var(--f-en);font-size:11px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-45)}
.title{font-family:var(--f-jp);font-weight:300;font-size:clamp(22px,2.8vw,29px);line-height:1.85;
  color:var(--ink);letter-spacing:.05em;margin-top:20px}

.text-link{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:.3s var(--ease)}
.text-link .arw{display:inline-block;transition:transform .3s var(--ease)}
.text-link:hover{color:var(--stone);border-color:var(--stone)}
.text-link:hover .arw{transform:translateX(5px)}

/* ---- スクロール出現（CSSのみ。@supportsでfeature-detect。非対応時は常時表示） ---- */
@supports (animation-timeline:view()){
  .reveal{opacity:0;transform:translateY(18px);animation:revealIn linear both;
    animation-timeline:view();animation-range:entry 0% cover 30%}
}
@keyframes revealIn{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;animation:none !important}
}

/* ---- 写真プレースホルダー（グレースケール・グラデーション矩形＋作品名タイポ） ---- */
.ph{position:relative;background:linear-gradient(155deg,#EDECE8 0%,#DCDAD3 48%,#C9C6BC 100%);
  overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.5),transparent 40%);mix-blend-mode:soft-light}
.ph .ph-mark{position:absolute;left:16px;bottom:14px;font-family:var(--f-en);font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(21,21,19,.4)}

/* ===== Header（v3: ガラス質のぼかし・下線アニメーションを廃し、色の濃淡のみで
   状態を示す控えめな構成。作品への最短導線を邪魔しないよう主張を弱める） ===== */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--f-en);font-weight:500;font-size:15.5px;letter-spacing:.14em;color:var(--ink)}
.logo small{display:block;font-family:var(--f-en);font-size:8px;font-weight:400;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-45);margin-top:5px}
.menu{display:flex;align-items:center;gap:0}
.menu a.nav-l{font-family:var(--f-en);font-size:11px;font-weight:400;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-45);padding:10px 14px;transition:color .3s var(--ease)}
.menu a.nav-l:hover{color:var(--ink)}
.menu a.nav-l.is-current{color:var(--ink-70)}
.menu .nav-cta{margin-left:8px;font-family:var(--f-en);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-70);padding:10px 14px;transition:color .3s var(--ease)}
.menu .nav-cta:hover{color:var(--stone)}
@media(max-width:760px){.menu .nav-l{display:none}.menu .nav-cta{margin-left:0}}

/* ===== Hero（極端な余白の中に社名と一文だけ） ===== */
.hero{min-height:78vh;display:flex;align-items:center;padding:64px 0}
.hero .inner{max-width:720px}
.hero .mark{font-family:var(--f-en);font-size:11px;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-45)}
.hero h1{margin-top:36px;font-family:var(--f-jp);font-weight:300;font-size:clamp(1.9rem,4.6vw,3rem);
  line-height:1.9;letter-spacing:.06em}
.hero h1 b{font-weight:500}
.hero .lead{margin-top:40px;font-size:13.5px;color:var(--ink-70);max-width:30em;line-height:2.15}
.hero .links{margin-top:56px;display:flex;gap:36px;flex-wrap:wrap}

/* ===== Section base（帯構成は使わない。区切りは余白+罫線のみ） ===== */
section{padding:clamp(88px,13vh,140px) 0}
.rule-top{border-top:1px solid var(--line)}

/* ---- Statement（大判の一言ステートメント） ---- */
.statement{font-family:var(--f-jp);font-weight:300;font-size:clamp(1.3rem,2.6vw,1.8rem);
  line-height:2.05;letter-spacing:.05em;max-width:24em}
.statement b{font-weight:500}

/* ---- 長文（About本文。カード化せず1カラムで流す） ---- */
.prose{margin-top:36px;max-width:38em}
.prose p{font-size:13.5px;color:var(--ink-70);line-height:2.2;margin-bottom:22px}
.prose p:last-child{margin-bottom:0}

.subhead{margin-top:64px;font-family:var(--f-jp);font-weight:400;font-size:16.5px;letter-spacing:.05em}
.subhead:first-of-type{margin-top:0}
.subhead + .prose{margin-top:20px}

/* ---- プロフィール（枠で囲わずシンプルな見出し+本文） ---- */
.profile-name{font-family:var(--f-jp);font-weight:400;font-size:19px;letter-spacing:.06em}
.profile-role{display:block;margin-top:10px;font-family:var(--f-en);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45)}

/* ---- 沿革（縦の年表。罫線のみで区切る） ---- */
.tl{margin-top:48px}
.tl-item{display:grid;grid-template-columns:110px 1fr;gap:26px;padding:24px 0;
  border-top:1px solid var(--line);align-items:baseline}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-item .y{font-family:var(--f-en);font-size:14px;color:var(--ink-45);letter-spacing:.08em}
.tl-item p{font-size:13.5px;color:var(--ink-70)}
@media(max-width:640px){.tl-item{grid-template-columns:1fr;gap:6px}}

/* ---- 作品ギャラリー：非対称グリッド（均等3カラムを避ける） ---- */
.works-grid{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px}
.w-item{position:relative}
.w-item .w-body{display:block}
.w-item .ph{aspect-ratio:4/5;transition:transform .8s var(--ease)}
.w-item:hover .ph{transform:scale(1.02)}
.w-item .cap{margin-top:16px}
.w-item .cat{display:block;font-family:var(--f-en);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45)}
.w-item .tt{display:block;margin-top:7px;font-family:var(--f-jp);font-weight:400;font-size:14.5px;
  letter-spacing:.04em}
.w-item .yr{display:block;margin-top:5px;font-family:var(--f-en);font-size:10.5px;color:var(--ink-30)}
/* 代表作は大きく（2カラム分）・その他は小さく（1カラム分）配置する非対称レイアウト */
.w-item.lg{grid-column:span 2}
.w-item.lg .ph{aspect-ratio:16/10}
@media(max-width:900px){
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .w-item.lg{grid-column:span 2}
}
@media(max-width:560px){
  .works-grid{grid-template-columns:1fr;gap:40px}
  .w-item.lg{grid-column:span 1}
  .w-item.lg .ph{aspect-ratio:4/5}
}

/* ---- 抜粋ギャラリー（トップページ用の簡易版。同じ非対称ロジックを縮小適用） ---- */
.works-excerpt{margin-top:56px}

/* ---- サービス／流れ：番号+短文の縦リスト（カード化しない） ---- */
.num-list{margin-top:56px}
.num-item{display:grid;grid-template-columns:76px 1fr;gap:26px;padding:32px 0;
  border-top:1px solid var(--line)}
.num-list .num-item:last-child{border-bottom:1px solid var(--line)}
.num-item .n{font-family:var(--f-en);font-weight:300;font-size:24px;color:var(--ink-30)}
.num-item h3{font-family:var(--f-jp);font-weight:400;font-size:16px;letter-spacing:.05em}
.num-item p{margin-top:10px;font-size:13px;color:var(--ink-70);line-height:2.1;max-width:34em}
@media(max-width:640px){.num-item{grid-template-columns:40px 1fr}}

/* ---- 相談の流れ（Contact用。フロー図・カードにせず番号+短文の縦リスト） ---- */
.flow-list{margin-top:56px;max-width:38em}
.flow-item{display:grid;grid-template-columns:44px 1fr;gap:22px;padding:26px 0;
  border-top:1px solid var(--line)}
.flow-list .flow-item:last-child{border-bottom:1px solid var(--line)}
.flow-item .fn{font-family:var(--f-en);font-size:13px;color:var(--ink-45);letter-spacing:.06em}
.flow-item h4{font-family:var(--f-jp);font-weight:400;font-size:14.5px}
.flow-item p{margin-top:8px;font-size:12.5px;color:var(--ink-70);line-height:1.95}

/* ---- お問い合わせフォーム（装飾最小限） ---- */
.cform{margin-top:56px;max-width:520px}
.cform .row{margin-bottom:26px}
.cform label{display:block;font-family:var(--f-en);font-size:10.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:10px}
.cform .req{color:var(--stone);margin-left:6px;font-size:9.5px}
.cform input,.cform select,.cform textarea{width:100%;border:none;border-bottom:1px solid var(--line);
  background:transparent;font-family:var(--f-jp);font-weight:300;font-size:14px;color:var(--ink);
  padding:9px 2px;transition:border-color .25s}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--ink)}
.cform textarea{resize:vertical;min-height:110px;line-height:1.9}
.cform .submit-row{margin-top:40px}
.cform button{font-family:var(--f-en);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  border:none;background:none;color:var(--ink);padding:4px 0;border-bottom:1px solid var(--ink);
  cursor:pointer;transition:.3s var(--ease)}
.cform button:hover{color:var(--stone);border-color:var(--stone)}
.cform .note{margin-top:20px;font-size:11px;color:var(--ink-45)}

/* ---- News / お知らせ（罫線のみの縦リスト） ---- */
.news-list{margin-top:44px}
.news-list li{list-style:none;border-top:1px solid var(--line)}
.news-list li:last-child{border-bottom:1px solid var(--line)}
.news-list a{display:flex;align-items:center;gap:24px;padding:20px 0;color:var(--ink);
  transition:.3s var(--ease)}
.news-list a:hover{padding-left:10px;color:var(--stone)}
.news-list a:hover .arw{transform:translateX(5px)}
.news-list .nd{font-family:var(--f-en);font-size:11.5px;color:var(--ink-45);width:96px;flex-shrink:0}
.news-list .nt{flex:1;font-size:13px}
.news-list .arw{margin-left:auto;font-family:var(--f-en);display:inline-block;transition:transform .3s var(--ease)}

/* ---- ページ末尾リンク（CTA帯の代替。控えめなテキストリンクのみ） ---- */
.end-link{padding:0 0 clamp(80px,12vh,120px)}
.end-link .label{display:block;margin-bottom:18px}

/* ---- Page hero（下層ページ用の簡易見出し） ---- */
.page-head{padding:clamp(64px,11vh,104px) 0 clamp(44px,7vh,68px)}
.page-head h1{margin-top:22px;font-family:var(--f-jp);font-weight:300;font-size:clamp(1.7rem,3.6vw,2.4rem);
  letter-spacing:.06em}
.page-head p{margin-top:22px;font-size:13.5px;color:var(--ink-70);max-width:32em;line-height:2.1}
.crumb{font-family:var(--f-en);font-size:11px;letter-spacing:.12em;color:var(--ink-45)}
.crumb a:hover{color:var(--stone)}

/* ---- Jump nav（works用。押しても何も起きない見せかけのフィルタタブは廃止し、
   実際にその場へ飛ぶカテゴリ別の実アンカーのみに絞る） ---- */
.jump-nav{margin-top:34px;display:flex;flex-wrap:wrap;gap:4px 22px}
.jump-nav a{font-family:var(--f-en);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);padding-bottom:2px;transition:color .3s var(--ease)}
.jump-nav a:hover{color:var(--stone)}

/* ---- 作品グループ見出し（Works: カテゴリごとの実アンカー区切り） ---- */
.works-group{scroll-margin-top:96px}
.works-group + .works-group{margin-top:96px}
.works-group .label{display:block}

/* ===== Footer（背景は本文と同じ単色。罫線のみで区切る） ===== */
footer{border-top:1px solid var(--line);padding:56px 0 32px}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer .logo{font-size:16px}
footer .fdesc{margin-top:18px;font-size:12px;line-height:2;max-width:26em;color:var(--ink-70)}
footer h5{font-family:var(--f-en);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:11px;font-size:12.5px;color:var(--ink-70)}
footer a:hover{color:var(--stone)}
footer .bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer .cr{font-family:var(--f-en);font-size:10px;letter-spacing:.1em;color:var(--ink-45)}
footer .by{font-family:var(--f-en);font-size:10px;letter-spacing:.12em;color:var(--ink-45)}
footer .by a{border-bottom:1px solid var(--line)}
@media(max-width:760px){footer .fgrid{grid-template-columns:1fr;gap:30px}}

/* ---- 制作サンプル告知バー（デモ時のみ。本番納品では削除） ---- */
.sample-bar{background:#000;color:#EFEDE7;text-align:center;font-size:12px;letter-spacing:.03em;
  padding:9px 16px;line-height:1.6}
.sample-bar strong{color:#fff}
.sample-bar a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);font-weight:500;
  margin-left:8px;white-space:nowrap}