/* =========================================================
   .standard ｜ 下層ページ
   トップの「一本の線」を、左余白の一本の罫線として引き継ぐ
   ========================================================= */

/* 左の罫線。スクロールした分だけ下へ伸びる */
.rail{
  position:fixed; left:clamp(16px,3vw,38px); top:0; bottom:0; width:1px;
  background:var(--rule); z-index:20; pointer-events:none;
}
.rail__fill{ display:block; width:1px; height:0; background:var(--ink); opacity:.55; }
.rail__dot{
  position:fixed; left:clamp(16px,3vw,38px); width:5px; height:5px; border-radius:50%;
  background:var(--accent); translate:-2px -50%; z-index:21; pointer-events:none; opacity:0;
}
@media (max-width:720px){ .rail,.rail__dot{ display:none; } }

/* =============== ページの骨格 =============== */
.page{ max-width:var(--col); margin:0 auto; padding:clamp(120px,20vh,220px) var(--pad) 0; }
.page--wide{ max-width:min(92vw,1080px); }
.page__head > * + *{ margin-top:24px; }
.page__title{ font-size:clamp(24px,3.8vw,42px); }
.page__lead{ font-size:15px; line-height:2.5; color:var(--grey); max-width:42em; }

.back{ display:inline-block; margin-top:96px; font-family:var(--num); font-size:12.5px; letter-spacing:.22em; color:var(--grey); }
.back:hover{ color:var(--accent); }
.back::before{ content:"← "; }

.hr{ height:1px; background:var(--rule); margin:clamp(64px,9vh,110px) 0; }

/* 絞り込み */
.tags{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:44px; }
.tags a{
  font-size:12.5px; letter-spacing:.12em; color:var(--grey);
  border:1px solid var(--rule); border-radius:100px; padding:6px 16px; transition:.4s var(--ease);
}
.tags a:hover, .tags a[aria-current]{ border-color:var(--ink); color:var(--ink); }

/* =============== 施工事例 一覧 =============== */
.works{ margin-top:clamp(72px,10vh,120px); display:grid; gap:clamp(80px,12vh,150px); }
.work{ display:block; }
.work__q{ margin-top:16px; font-size:clamp(20px,2.7vw,29px); line-height:2; }
.work__ph{ margin-top:34px; aspect-ratio:16/10; background:var(--ph); display:grid; place-items:center; overflow:hidden; }
.work__ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }
.work:hover .work__ph{ opacity:.86; transition:opacity .6s var(--ease); }
/* 実写を入れる場合。16:10 の枠は保ったまま、写真は中央で切り取る */
.work__ph--img img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.work__a{ margin-top:30px; font-family:var(--mincho); font-size:clamp(16px,2vw,21px); line-height:2.3; }
.work__meta{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 22px; }
.work__meta li{ font-family:var(--num); font-size:12px; letter-spacing:.16em; color:var(--pale); }
.work__more{ margin-top:24px; font-family:var(--num); font-size:12px; letter-spacing:.22em; color:var(--grey); }
.work:hover .work__more{ color:var(--accent); }
.work__more::after{ content:" →"; }

/* =============== 事例 詳細 =============== */
.hero__ph{ margin-top:56px; aspect-ratio:16/9; background:var(--ph); display:grid; place-items:center; }
.hero__ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }
.spec{ margin-top:56px; border-top:1px solid var(--rule); }
.spec > div{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule); }
.spec dt{ font-size:12.5px; letter-spacing:.18em; color:var(--pale); }
.spec dd{ font-size:15px; }

.chap{ margin-top:clamp(72px,10vh,120px); }
.chap > * + *{ margin-top:22px; }
.chap__h{ font-size:clamp(19px,2.4vw,26px); }
.chap p{ font-size:15px; line-height:2.6; color:var(--grey); }
.chap p strong{ font-weight:400; color:var(--ink); }
.figs{ margin-top:44px; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.figs .ph{ aspect-ratio:4/3; background:var(--ph); display:grid; place-items:center; }
.figs .ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }
.cap{ margin-top:12px; font-size:12.5px; color:var(--pale); letter-spacing:.1em; }

/* ---- 実写を入れる事例ページ ----
   プレースホルダー（.ph）は箱の比率を先に決めていたが、
   実写は «写真の比率のまま» 置きたい。だから aspect-ratio は指定しない。 */
/* 主写真。縦位置が来ても画面を埋め尽くさないよう、高さで頭打ちにする */
.hero__ph--img{ aspect-ratio:auto; background:none; display:block; margin:56px 0 0; }
.hero__ph--img img{ width:100%; max-height:78vh; object-fit:cover; }

/* 並べる写真は «縦位置» で統一する（下端が揃わないとページが乱れる）。
   横位置の絵は .fig--full で単独・全幅に置く。混ぜない。 */
.figs--photo{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(22px,3vw,36px); align-items:start; }
.figs--photo figure{ margin:0; }
.figs--photo img{ width:100%; aspect-ratio:2/3; object-fit:cover; }

.fig--full{ margin:clamp(40px,6vw,72px) 0 0; }
.fig--full img{ width:100%; max-height:74vh; object-fit:cover; }
.fig--full .cap{ max-width:62ch; }

/* 写真ごとの文章は «説明» ではなく «読ませる» ので、
   通常のキャプションより一段大きく、行間も本文に寄せる */
.figs--photo .cap{
  margin-top:16px; font-size:13.5px; line-height:2.35;
  color:var(--grey); letter-spacing:.06em; text-align:left;
}
.figs--photo .cap strong{ font-weight:400; color:var(--ink); }

/* 引きの絵は2枚並びまで。3枚並ぶと空間の広がりが伝わらない */
.figs--wide{ grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }

@media (max-width:640px){
  .figs--photo, .figs--wide{ grid-template-columns:1fr; }
}

.pager{ margin-top:clamp(80px,11vh,140px); display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--rule); padding-top:26px; }
.pager a{ font-family:var(--num); font-size:12px; letter-spacing:.2em; color:var(--grey); }
.pager a:hover{ color:var(--accent); }

/* =============== 写真 =============== */
/* =========================================================
   写真：行き先ごとの帯
   «いつ、どこへ行ったか» を単位にまとめる。
   帯の中は横スクロール、縦に進むと日付をさかのぼる。
   ＝ 縦軸が «時間»、横軸が «その日に見たもの»。

   帯は画面いっぱいに伸ばしたいので、本文の左右余白（--pad）を
   .page ではなく中の要素に付けている（.page--full）。
   ========================================================= */
.page--full{ max-width:none; padding-left:0; padding-right:0; }
.page--full .page__head--pad,
.page--full .page__pad{ max-width:min(92vw,1080px); margin-inline:auto; padding-inline:var(--pad); }

/* ---- 帯。目次は置かない（スクロールで順に出会う） ---- */
.trip{ margin-top:clamp(48px,7vh,84px); }
.trip:first-of-type{ margin-top:clamp(40px,6vh,68px); }
.trip__h{
  padding:0 var(--pad); display:flex; align-items:baseline; gap:clamp(12px,2vw,22px);
  border-bottom:1px solid var(--rule); padding-bottom:14px;
}
.trip__h h2{ font-size:clamp(18px,2.4vw,25px); letter-spacing:.1em; }
.trip__h time{ font-family:var(--num); font-size:12px; letter-spacing:.18em; color:var(--pale); }
.trip__hint{ margin-left:auto; font-family:var(--num); font-size:10.5px; letter-spacing:.28em; color:var(--pale); }

/* 横スクロール。端で切れて見えるよう、右は余白を残さない */
.trip__row{
  margin-top:clamp(18px,3vh,28px);
  display:flex; gap:clamp(12px,2vw,24px);
  overflow-x:auto; overflow-y:hidden;
  padding:0 var(--pad) 6px;
  scroll-snap-type:x proximity;
  /* snap は «スクロール枠の左端» に合わせにいくので、padding-left を無視して
     その分だけ勝手に横スクロールしてしまう。scroll-padding で基準をずらす */
  scroll-padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
/* 帯の中は «高さを揃えて、幅で比率を出す»。
   幅を揃えると縦位置と横位置で高さが変わり、下の文章が段違いになって帯が乱れる。
   高さを固定すれば下端が一直線に揃い、写真の比率もそのまま残せる。 */
.trip__row figure{ margin:0; flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; }
/* 実写もプレースホルダーも «同じ高さ»。幅は写真の比率のまま伸び縮みする */
.trip__row img,
.trip__row .ph{ height:clamp(230px,40vh,400px); width:auto; display:block; }
.trip__row img{ object-fit:cover; max-width:none; }
.trip__row .ph{ background:var(--ph); display:grid; place-items:center; }
.trip__row .ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }
.trip__row .r43{ aspect-ratio:4/3; } .trip__row .r34{ aspect-ratio:3/4; }
.trip__row .r11{ aspect-ratio:1/1; } .trip__row .r169{ aspect-ratio:16/9; }

/* 1枚ずつの一言。上に本文色で言葉、下にうすく場所と日付。
   幅は写真に合わせる（width:100% ＝ figure の幅 ＝ 写真の幅） */
.trip__row figcaption{ margin-top:12px; width:100%; }
.trip__row figcaption span{ display:block; font-size:13.5px; line-height:1.9; color:var(--grey); letter-spacing:.06em; }
.trip__row figcaption i{
  display:block; margin-top:4px; font-family:var(--num); font-style:normal;
  font-size:10.5px; letter-spacing:.16em; color:var(--pale);
}
.trip__row a:hover .ph, .trip__row figure:hover .ph{ opacity:.88; transition:opacity .6s var(--ease); }

/* 押せることが分かるように、写真だけ指の形にする */
.trip__row img{ cursor:zoom-in; }
.trip__row img:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

@media (max-width:640px){
  .trip__row .ph{ height:clamp(200px,32vh,280px); }
  .trip__hint{ display:none; }
}

/* =========================================================
   写真を1枚だけ大きく出す（押したときに開く箱）
   HTMLには書かない。page.js が組み立てて body に足す。
   ========================================================= */
.lb{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:rgba(12,11,10,.94);
  opacity:0; transition:opacity .26s var(--ease);
  padding:clamp(16px,4vw,48px);
}
.lb.is-open{ opacity:1; }
.lb[hidden]{ display:none; }

.lb__fig{
  margin:0; display:flex; flex-direction:column; align-items:center;
  max-width:100%; max-height:100%;
  transform:scale(.985); transition:transform .3s var(--ease);
}
.lb.is-open .lb__fig{ transform:none; }
.lb__fig img{
  max-width:100%;
  /* 下の文章のぶんだけ高さを譲る。写真は必ず全体が入る */
  max-height:calc(100vh - clamp(120px,20vh,190px));
  width:auto; height:auto; object-fit:contain;
  cursor:default;
}
.lb__fig figcaption{ margin-top:16px; text-align:center; max-width:56ch; }
.lb__fig figcaption span{ display:block; font-size:14px; line-height:1.9; color:#efece7; letter-spacing:.06em; }
.lb__fig figcaption i{
  display:block; margin-top:6px; font-family:var(--num); font-style:normal;
  font-size:10.5px; letter-spacing:.2em; color:rgba(239,236,231,.5);
}

/* 閉じる・送る。指で押しやすい大きさを確保する */
.lb__x, .lb__nav{
  position:absolute; z-index:1;
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  color:#efece7; background:rgba(255,255,255,.06);
  font-family:var(--num); line-height:1;
  transition:background .25s ease, opacity .25s ease;
}
.lb__x{ top:clamp(10px,2vh,22px); right:clamp(10px,2vw,22px); font-size:17px; }
.lb__nav{ top:50%; margin-top:-26px; font-size:30px; padding-bottom:4px; }
.lb__nav--prev{ left:clamp(6px,1.5vw,20px); }
.lb__nav--next{ right:clamp(6px,1.5vw,20px); }
.lb__x:hover, .lb__nav:hover{ background:rgba(255,255,255,.16); }
/* 1枚しかないときは送る意味がない */
.lb.is-one .lb__nav{ display:none; }

@media (max-width:640px){
  .lb{ padding:12px; }
  .lb__fig img{ max-height:calc(100vh - 170px); }
  .lb__nav{ width:44px; height:44px; font-size:26px; background:rgba(255,255,255,.04); }
}

@media (prefers-reduced-motion: reduce){
  .lb{ transition:opacity .15s ease; }
  .lb__fig, .lb.is-open .lb__fig{ transform:none; transition:none; }
}

.gal{ margin-top:clamp(72px,10vh,120px); columns:2; column-gap:clamp(16px,3vw,34px); }
@media (max-width:720px){ .gal{ columns:1; } }
.gal figure{ break-inside:avoid; margin:0 0 clamp(16px,3vw,34px); }
.gal .ph{ background:var(--ph); display:grid; place-items:center; }
.gal .ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }
.gal .r34{ aspect-ratio:3/4; } .gal .r43{ aspect-ratio:4/3; }
.gal .r11{ aspect-ratio:1/1; } .gal .r169{ aspect-ratio:16/9; }
.gal figcaption{ margin-top:10px; display:flex; justify-content:space-between; gap:14px; }
.gal figcaption span{ font-size:13px; color:var(--grey); letter-spacing:.08em; }
.gal figcaption i{ font-family:var(--num); font-style:normal; font-size:11.5px; color:var(--pale); letter-spacing:.18em; }

/* =============== 私のこと =============== */
.me{ margin-top:clamp(56px,8vh,90px); display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:clamp(28px,5vw,60px); align-items:start; }
.me__ph{ margin:0; background:var(--ph); aspect-ratio:614/671; overflow:hidden; }
.me__ph img{ width:100%; height:100%; object-fit:cover; }
.me__body > * + *{ margin-top:20px; }
.me__name{ font-size:clamp(20px,2.6vw,26px); }
.me__name i{ display:block; margin-top:8px; font-family:var(--num); font-style:normal; font-size:11px; letter-spacing:.3em; color:var(--pale); }
.me__role{ font-family:var(--num); font-size:12px; letter-spacing:.2em; color:var(--grey); }
/* 経歴は並べない。出身と資格だけ */
.me__fact{ margin-top:34px !important; border-top:1px solid var(--rule); }
.me__fact > div{ display:grid; grid-template-columns:80px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule); }
.me__fact dt{ font-size:12.5px; letter-spacing:.18em; color:var(--pale); }
.me__fact dd{ font-size:15px; line-height:2.2; }
@media (max-width:720px){
  .me{ grid-template-columns:1fr; }
  .me__ph{ max-width:280px; }
}

/* =============== 考えていること（about）===============
   資格や経歴を並べる代わりに置いている3本。
   «何ができるか» は service/ にあるので、ここは «なぜそうするか» だけ。
   番号 → 見出し → 本文の骨格は、施工事例やサービスと同じ。 */
.think{ margin-top:clamp(72px,10vh,120px); display:grid; gap:clamp(56px,8vh,90px); }
.think__b{ padding-top:clamp(28px,4vh,44px); border-top:1px solid var(--rule); }
.think__b h2{ margin-top:14px; font-size:clamp(18px,2.3vw,24px); line-height:2.05; }
.think__b .body{ margin-top:22px; max-width:44em; }

/* =============== Instagram =============== */
.ig{ margin-top:clamp(72px,10vh,120px); padding-top:clamp(40px,6vh,64px); border-top:1px solid var(--rule); }
.ig > * + *{ margin-top:16px; }
/* プロフィール行 */
.ig__acct{
  margin-top:24px !important; display:flex; align-items:center; gap:16px;
  border:1px solid var(--rule); padding:16px 20px; transition:.4s var(--ease);
}
.ig__acct:hover{ border-color:var(--ink); }
.ig__mark{ flex:none; width:30px; height:30px; color:var(--ink); }
.ig__mark svg{ width:100%; height:100%; display:block; }
.ig__id{ display:grid; gap:4px; min-width:0; }
.ig__id b{ font-family:var(--num); font-weight:400; font-size:16px; letter-spacing:.06em; }
.ig__id i{ font-style:normal; font-size:13px; color:var(--grey); letter-spacing:.04em; }
.ig__follow{
  margin-left:auto; flex:none; font-size:13px; letter-spacing:.1em; color:var(--grey);
  border-bottom:1px solid var(--rule); padding-bottom:4px;
}
.ig__follow::after{ content:" →"; }
.ig__acct:hover .ig__follow{ color:var(--accent); border-color:var(--accent); }
@media (max-width:560px){
  .ig__acct{ flex-wrap:wrap; }
  .ig__follow{ margin-left:0; width:100%; }
}


/* =============== コラム =============== */
.idx{ margin-top:clamp(64px,9vh,110px); border-top:1px solid var(--rule); }
.idx a{ display:grid; grid-template-columns:96px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--rule); align-items:baseline; transition:.4s var(--ease); }
.idx a:hover{ padding-left:8px; }
.idx time{ font-family:var(--num); font-size:12px; letter-spacing:.16em; color:var(--pale); }
.idx h2{ font-size:clamp(16px,2.1vw,20px); line-height:1.9; }
.idx p{ margin-top:8px; font-size:13.5px; color:var(--grey); line-height:2.2; }
.idx a:hover h2{ color:var(--accent); }

/* 記事本文 */
.art{ margin-top:clamp(56px,8vh,90px); }
.art > * + *{ margin-top:30px; }
.art p{ font-size:16px; line-height:2.6; }
.art h2{ margin-top:64px; font-size:clamp(19px,2.4vw,25px); padding-top:26px; border-top:1px solid var(--rule); }
.art blockquote{
  margin:44px 0; padding-left:26px; border-left:1px solid var(--accent);
  font-family:var(--mincho); font-size:clamp(16px,2.1vw,21px); line-height:2.4;
}
.art figure{ margin:48px 0; }
.art figure .ph{ aspect-ratio:16/10; background:var(--ph); display:grid; place-items:center; }
.art figure .ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }
.art__meta{ display:flex; gap:20px; align-items:baseline; }
.art__meta time{ font-family:var(--num); font-size:12px; letter-spacing:.18em; color:var(--pale); }

/* =========================================================
   サービス
   «項目ごとに、何ができるかが分かる» ことを最優先にした並べ方。
   施工事例（.work）と同じ骨格（番号 → 見出し → 写真 → 本文）を使い、
   その下に «できること／こんな方へ» を表で足している。
   表にしているのは、読まずに «拾える» ようにするため。
   ========================================================= */
/* 個人／企業 の区切り。ここが変わったことが分かればいい */
.svc__group{ margin-top:clamp(84px,12vh,150px); }
.svc__group:first-of-type{ margin-top:clamp(56px,8vh,90px); }
.svc__group-h{
  display:flex; align-items:baseline; gap:clamp(12px,2vw,22px);
  border-bottom:1px solid var(--rule); padding-bottom:16px;
}
.svc__group-h h2{ font-size:clamp(19px,2.5vw,26px); letter-spacing:.1em; }
.svc__group-h span{
  margin-left:auto; font-family:var(--num); font-size:10.5px;
  letter-spacing:.28em; color:var(--pale);
}
.svc__group-lead{ margin-top:22px; font-size:14.5px; line-height:2.5; color:var(--grey); max-width:42em; }

.svcs{ margin-top:clamp(44px,6vh,72px); display:grid; gap:clamp(72px,10vh,124px); }
/* トップから «#s01» のように飛んでくる。固定ヘッダーに見出しが潜らないよう逃がす */
.svc{ scroll-margin-top:clamp(86px,13vh,120px); }
.svc__h{ margin-top:14px; font-size:clamp(20px,2.7vw,28px); line-height:2; }
/* 一行のコピー。明朝で置いて、サイト全体の «問いかけ» と揃える */
.svc__q{ margin-top:18px; font-family:var(--mincho); font-size:clamp(15px,2vw,19px); line-height:2.35; }
.svc__ph{ margin:32px 0 0; }
/* 写真は1ブロックに1枚だけ。縦と横を並べないので比率は問わない */
/* 写真も白紙の枠も «同じ形». 縦位置の写真が混ざっても帯の高さが揃う */
.svc__ph img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
/* まだ載せられる写真が無いところ。撮れたら <img> に置き換えるだけ。
   «無い» ことを隠さず、枠だけ置いて場所を確保しておく */
.svc__ph .ph{
  aspect-ratio:16/10; background:var(--ph);
  display:grid; place-items:center;
}
.svc__ph .ph span{
  font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale);
}
.svc__body{ margin-top:28px; font-size:15px; line-height:2.6; color:var(--grey); max-width:44em; }

/* できること／こんな方へ。事例詳細の .spec と同じ作法 */
.svc__list{ margin-top:32px; border-top:1px solid var(--rule); }
.svc__list > div{
  display:grid; grid-template-columns:132px 1fr; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.svc__list dt{ font-size:12.5px; letter-spacing:.18em; color:var(--pale); }
.svc__list dd{ font-size:14.5px; line-height:2.2; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.svc__tags li{
  font-size:12.5px; letter-spacing:.08em; color:var(--grey);
  border:1px solid var(--rule); border-radius:100px; padding:5px 14px;
}
/* 準備中のものに添える一言 */
.svc__note{ margin-top:18px; font-size:12.5px; line-height:2.1; color:var(--pale); letter-spacing:.06em; }

@media (max-width:640px){
  .svc__list > div{ grid-template-columns:1fr; gap:10px; padding:14px 0; }
}

/* 次のアクション */
.cta{ margin-top:clamp(90px,13vh,160px); text-align:center; }
.cta p{ font-family:var(--mincho); font-size:clamp(17px,2.3vw,24px); line-height:2.2; }
.cta a{
  display:inline-block; margin-top:32px; font-family:var(--mincho); font-size:17px; letter-spacing:.16em;
  border-bottom:1px solid var(--rule); padding-bottom:10px; transition:.5s var(--ease);
}
.cta a:hover{ border-color:var(--accent); color:var(--accent); }