/* ==========================================================================
   AMPHONY — 下層ページ（2026-10 トップに合わせて統一）
   top.css（色・書体・ヘッダー・フッター・共通部品）の上に重ねて読む。
   トップページはこのファイルを読まないので、ここを変えてもトップは変わらない。
   ========================================================================== */

/* 下層ではヘッダーを最初から生成りの面にしておく（写真の上に乗らないため） */
body.page .hd{background:rgba(246,243,238,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.page .hd.scrolled{box-shadow:0 1px 0 var(--line)}
.gnav a[aria-current="page"].gnav-cta{background:var(--bordeaux);color:#fff!important}

/* 面の切り替え */
.bg-paper{background:var(--paper)}
.bg-kinari{background:var(--kinari)}
.sec-sm{padding:clamp(64px,8vw,110px) 0}

/* --------------------------------------------------------------------------
   ページ見出し
   -------------------------------------------------------------------------- */
.pg-head{padding:calc(84px + clamp(56px,8vw,112px)) 0 clamp(48px,6vw,80px);background:var(--kinari)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--latin),var(--mincho);
  font-size:12px;letter-spacing:.2em;color:var(--muted);line-height:1.6;margin-bottom:clamp(36px,4.5vw,56px)}
.crumb a{transition:color .3s var(--ease)}
.crumb a:hover{color:var(--bordeaux)}
.crumb .sl{color:var(--gold)}
.pg-t{margin-top:24px;word-break:auto-phrase;font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.6;letter-spacing:.08em;color:var(--sumi);
  font-feature-settings:"palt" 1}
.pg-en{display:block;margin-top:10px;font-family:var(--latin);font-weight:400;font-size:clamp(15px,1.3vw,18px);letter-spacing:.12em;color:var(--ink2)}
.pg-lead{margin-top:28px;max-width:40em;font-size:15.5px;line-height:2.05;color:var(--ink)}
.pg-lead p+p{margin-top:.9em}
.pg-meta{margin-top:18px;font-family:var(--latin),var(--mincho);font-size:12.5px;letter-spacing:.18em;color:var(--muted)}

.pg-hero{background:var(--kinari);padding-bottom:clamp(8px,2vw,24px)}
.pg-hero figure{overflow:hidden;background:var(--stone)}
.pg-hero img{width:100%;aspect-ratio:21/9;object-fit:cover}
.pg-cap{margin-top:12px;font-family:var(--latin),var(--mincho);font-size:12px;letter-spacing:.16em;color:var(--muted)}

@media (max-width:1023px){
  .pg-head{padding-top:calc(64px + clamp(44px,9vw,80px))}
}
@media (max-width:767px){
  .pg-head{padding-bottom:40px}
  .crumb{margin-bottom:32px;font-size:11px}
  .pg-t{font-size:clamp(23px,6.4vw,27px);line-height:1.65;letter-spacing:.06em}
  .pg-lead{margin-top:22px;font-size:14.5px;line-height:2}
  .pg-hero .wrap{padding:0}
  .pg-hero img{aspect-ratio:4/3}
  .pg-cap{padding:0 var(--gut)}
}

/* --------------------------------------------------------------------------
   本文の組み
   -------------------------------------------------------------------------- */
.prose{max-width:40em;font-size:15px;line-height:2.05}
.prose p+p{margin-top:1.05em}
.prose .note{font-size:13px;color:var(--ink2)}
.h2{margin-top:22px;font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.65;letter-spacing:.07em;color:var(--sumi);
  font-feature-settings:"palt" 1}
.note-s{margin-top:28px;font-size:12.5px;line-height:1.9;letter-spacing:.06em;color:var(--muted)}

/* 2列：文章＋写真（top.css の .story を下層向けに少し詰める） */
.page .story-ph img{aspect-ratio:4/3}
.page .story-ph.land img{aspect-ratio:3/2}
.page .story .h2{margin-top:22px}
.page .story .prose{margin-top:28px}

/* 考えること（見出し＋説明の行） */
.pts{border-top:1px solid var(--line)}
.pts>div{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,64px);
  padding:clamp(26px,3vw,36px) 0;border-bottom:1px solid var(--line)}
.pts dt .en{display:block;font-family:var(--latin);font-size:13px;letter-spacing:.22em;color:var(--bordeaux);line-height:1.4}
.pts dt .jp{display:block;margin-top:8px;font-weight:500;font-size:17px;line-height:1.6;letter-spacing:.08em;color:var(--sumi)}
.pts dd{margin:0;font-size:14.5px;line-height:2.05;color:var(--ink)}
@media (max-width:767px){
  .pts>div{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .pts dd{font-size:14px;line-height:2}
}

/* 6つの小さな項目 */
.cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(28px,3.4vw,48px)}
.cells>div{padding-top:24px;border-top:1px solid var(--gold-lt)}
.cells .en{font-family:var(--latin);font-size:13px;letter-spacing:.22em;color:var(--bordeaux);line-height:1}
.cells .jp{margin-top:10px;font-weight:500;font-size:17px;letter-spacing:.1em;color:var(--sumi)}
.cells p:last-child{margin-top:10px;font-size:14px;line-height:1.95;color:var(--ink2)}
@media (max-width:899px){.cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cells{grid-template-columns:1fr;gap:30px}}

/* 範囲の一覧（金の短い線） */
.dash{border-top:1px solid var(--line)}
.dash li{position:relative;padding:16px 0 16px 22px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.9}
.dash li::before{content:"";position:absolute;left:0;top:calc(16px + .95em);width:8px;height:1px;background:var(--gold)}

/* 暗い帯（トップの 04 と同じ面） */
.pg-band{position:relative;padding:clamp(96px,11vw,150px) 0;background:var(--sumi);color:var(--kinari);overflow:hidden;text-align:center}
.pg-band .bg{position:absolute;inset:0;opacity:.34}
.pg-band .bg img{width:100%;height:100%;object-fit:cover}
.pg-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,29,27,.62),rgba(33,29,27,.8))}
.pg-band .wrap{position:relative;z-index:2}
.pg-band p{display:inline-block;font-weight:500;font-size:clamp(20px,2.1vw,28px);line-height:1.85;letter-spacing:.1em;
  padding:26px 0;border-top:1px solid rgba(173,146,100,.55);border-bottom:1px solid rgba(173,146,100,.55);min-width:min(520px,100%)}
@media (max-width:767px){.pg-band p{font-size:19px}}

/* --------------------------------------------------------------------------
   SERVICES：3つの領域
   -------------------------------------------------------------------------- */
.sv-link{display:block}
.sv-link .sv-ph img{transition:transform 1.4s var(--ease)}
.sv-link:hover .sv-ph img{transform:scale(1.03)}
.sv-link:hover .sv-t{color:var(--bordeaux)}
.sv-link .sv-t{transition:color .4s var(--ease)}
.sv-link .wk-more{margin-top:22px}
.sv-link:hover .wk-more{color:var(--bordeaux);border-color:var(--bordeaux)}
.sv-link:hover .wk-more i{transform:translateX(4px)}

/* 進め方のタブ */
.wf-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);margin-bottom:clamp(48px,6vw,72px)}
.wf-tab{appearance:none;background:transparent;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink2);
  padding:22px clamp(18px,2.6vw,32px);display:flex;align-items:baseline;gap:16px;position:relative;
  transition:background .4s var(--ease),color .4s var(--ease)}
.wf-tab+.wf-tab{border-left:1px solid var(--line)}
.wf-tab .n{font-family:var(--latin);font-size:15px;color:var(--gold);letter-spacing:.08em}
.wf-tab .t{font-size:15.5px;letter-spacing:.08em;line-height:1.6}
.wf-tab .en{display:block;font-family:var(--latin);font-size:11.5px;letter-spacing:.2em;color:var(--muted)}
.wf-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background .4s var(--ease)}
.wf-tab:hover{color:var(--sumi)}
.wf-tab[aria-selected="true"]{background:var(--paper);color:var(--sumi)}
.wf-tab[aria-selected="true"]::after{background:var(--bordeaux)}
.wf-panel[hidden]{display:none}
.wf-desc{margin-bottom:44px;max-width:44em;font-size:15px;line-height:2.05}
.fl-list li.paid .t::after{content:"設計費が発生";display:inline-block;margin-left:10px;padding:1px 8px;font-size:10.5px;letter-spacing:.1em;
  color:var(--bordeaux);border:1px solid var(--gold-lt);vertical-align:2px;line-height:1.7}
@media (max-width:767px){
  .wf-tabs{grid-template-columns:1fr}
  .wf-tab+.wf-tab{border-left:0;border-top:1px solid var(--line)}
  .wf-tab{padding:18px 18px}
}

/* --------------------------------------------------------------------------
   WORKS 詳細
   -------------------------------------------------------------------------- */
.pj-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.pj-intro>div{padding-top:24px;border-top:1px solid var(--gold-lt)}
.pj-intro h2{font-weight:500;font-size:15px;letter-spacing:.14em;color:var(--bordeaux)}
.pj-intro h2 span{display:block;font-family:var(--latin);font-weight:400;font-size:11.5px;letter-spacing:.22em;color:var(--muted);margin-bottom:4px}
.pj-intro p{margin-top:14px;font-size:14.5px;line-height:2.05}
@media (max-width:899px){.pj-intro{grid-template-columns:1fr;gap:36px}}

.pj-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.pj-gal figure{overflow:hidden;background:var(--stone)}
.pj-gal img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.pj-gal .wide{grid-column:1/-1}
.pj-gal .wide img{aspect-ratio:16/9}
.pj-gal .tall img{aspect-ratio:4/5}
@media (max-width:767px){
  .pj-gal{grid-template-columns:1fr}
  .pj-gal .wide img,.pj-gal img,.pj-gal .tall img{aspect-ratio:4/3}
}

.pj-pager{margin-top:clamp(56px,6vw,80px);padding-top:30px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.pj-pager a{display:block;transition:color .4s var(--ease)}
.pj-pager a:hover{color:var(--bordeaux)}
.pj-pager .lbl{display:block;font-family:var(--latin);font-size:11.5px;letter-spacing:.22em;color:var(--muted)}
.pj-pager .nm{display:block;margin-top:6px;font-size:14.5px;letter-spacing:.06em;line-height:1.6}
.pj-pager .next{text-align:right}
.pj-pager .all{font-size:13.5px;letter-spacing:.1em;padding-bottom:4px;border-bottom:1px solid var(--gold-lt)}
@media (max-width:767px){
  .pj-pager{grid-template-columns:1fr 1fr}
  .pj-pager .all{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:10px}
}

/* WORKS 一覧（top.css の .wk を流用。数が多いので 3列の小さい組みも用意） */
.wk-list{margin-top:clamp(64px,7vw,96px)}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */
.page .ab-philo{margin-top:0}
.page .ab-company{margin-top:0}

/* --------------------------------------------------------------------------
   CONTACT フォーム
   -------------------------------------------------------------------------- */
.fm{max-width:820px}
.fm-field{margin-top:34px}
.fm-field:first-child{margin-top:0}
.fm label.l,.fm .l{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.1em;color:var(--sumi);margin-bottom:12px}
.fm .req{font-size:10.5px;letter-spacing:.12em;color:var(--bordeaux);border:1px solid var(--gold-lt);padding:0 7px;line-height:1.8}
.fm input[type=text],.fm input[type=email],.fm input[type=tel],.fm select,.fm textarea{
  width:100%;font:inherit;font-size:15px;letter-spacing:.04em;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:0;padding:13px 16px;transition:border-color .3s var(--ease);-webkit-appearance:none;appearance:none}
.fm select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px}
.fm textarea{min-height:200px;line-height:1.9;resize:vertical}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:none;border-color:var(--bordeaux)}
.fm-2{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.fm-2 .fm-field:nth-child(2){margin-top:0}
.fm-use{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fm-use label{position:relative;cursor:pointer}
.fm-use input{position:absolute;opacity:0;inset:0}
.fm-use .box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:84px;padding:0 8px;text-align:center;
  border:1px solid var(--line);background:var(--paper);transition:border-color .3s var(--ease),background .3s var(--ease)}
.fm-use .en{font-family:var(--latin);font-size:12px;letter-spacing:.2em;color:var(--muted);line-height:1}
.fm-use .jp{font-size:13.5px;letter-spacing:.06em;line-height:1.4}
.fm-use input:checked+.box{border-color:var(--bordeaux);background:#fff}
.fm-use input:checked+.box .en{color:var(--bordeaux)}
.fm-use input:focus-visible+.box{outline:1px solid var(--bordeaux);outline-offset:3px}
.fm-consent{margin-top:34px;display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.9;color:var(--ink2);cursor:pointer}
.fm-consent input{margin-top:6px;accent-color:var(--bordeaux);flex:none}
.fm-submit{margin-top:40px;border:0;cursor:pointer;font:inherit}
@media (max-width:767px){
  .fm-2{grid-template-columns:1fr;margin-top:28px}
  .fm-2 .fm-field:nth-child(2){margin-top:28px}
  .fm-field{margin-top:28px}
  .fm-use{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-use .box{height:72px}
  .fm-submit{width:100%}
}

/* 連絡先の3列 */
.info3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.info3>div{padding-top:24px;border-top:1px solid var(--gold-lt)}
.info3 h2{font-family:var(--latin);font-weight:400;font-size:13px;letter-spacing:.24em;color:var(--bordeaux)}
.info3 h2 span{margin-left:12px;font-family:var(--mincho);font-size:12px;letter-spacing:.12em;color:var(--muted)}
.info3 p{margin-top:14px;font-size:14.5px;line-height:2}
.info3 a{border-bottom:1px solid var(--gold-lt)}
.info3 .tlink{margin-top:16px;border-bottom:1px solid var(--gold-lt)}
@media (max-width:767px){.info3{grid-template-columns:1fr;gap:32px}}

/* 地図 */
.map{background:var(--stone)}
.map iframe{display:block;width:100%;height:clamp(320px,46vh,520px);border:0;filter:grayscale(1) sepia(.12) contrast(.95)}

/* 作品ページ：表紙は元の縦横比のまま。写真は2〜3枚ずつの段に並べ、
   どの段も横幅いっぱい・段の中は同じ高さ・すき間は縦横すべて同じ細さにそろえる */
.pj-hero{padding-bottom:0}
.pj-hero img{aspect-ratio:auto;height:auto}
.pj-photos-sec{--g:4px;padding:var(--g) 0 clamp(72px,8vw,110px)}
.pj-row{display:flex;gap:var(--g)}
.pj-row+.pj-row{margin-top:var(--g)}
.pj-row figure{margin:0;min-width:0;flex-basis:0;background:var(--stone)}
.pj-row img{display:block;width:100%;height:auto}
.pj-photos-sec .note-s{margin-top:18px}
.pj-photos-sec .pj-pager{margin-top:clamp(56px,7vw,96px)}
@media (max-width:767px){
  .pj-hero .wrap{padding:0 var(--gut)}
  .pj-hero img{aspect-ratio:auto}
  .pj-photos-sec{--g:3px}
}

/* コラム：本文は読みやすい幅で。写真は作品ページと同じく、段ごとに高さをそろえて細いすき間で並べる */
.col-sec{--g:4px;padding:clamp(48px,6vw,80px) 0 clamp(72px,8vw,110px)}
.col-body{max-width:720px;margin:0 auto}
.col-body p{font-size:15px;line-height:2.2;letter-spacing:.06em;color:var(--ink)}
.col-body p+p{margin-top:1.5em}
.col-body .col-h{margin:2.6em 0 1em;font-weight:500;font-size:clamp(18px,1.7vw,21px);line-height:1.7;letter-spacing:.08em;color:var(--sumi)}
.col-body .col-ph{margin:2.4em 0}
.col-sec .pj-pager{margin-top:clamp(56px,7vw,96px)}
@media (max-width:767px){ .col-body p{font-size:14.5px;line-height:2.1} .col-sec{--g:3px} }

/* コラム：写真と短い説明を2列で。写真は同じ縦横比なので、行がきれいにそろう */
.col-grid{width:min(960px,calc(100vw - var(--gut) * 2));margin:3.2em 0 3.2em 50%;transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);row-gap:clamp(40px,5vw,64px)}
.col-fig{margin:0}
.col-fig img{display:block;width:100%;height:auto;background:var(--stone)}
.col-fig figcaption{margin-top:16px;font-size:13px;line-height:2;letter-spacing:.06em;color:var(--ink2)}
.col-fig-t{display:block;margin-bottom:4px;font-size:14.5px;letter-spacing:.1em;color:var(--sumi)}
@media (max-width:767px){ .col-grid{grid-template-columns:1fr;row-gap:44px} }

/* 2026-10-29 添付ファイル欄（任意） */
.fm .opt{font-size:10.5px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line);padding:0 7px;line-height:1.8}
.fm input[type=file]{display:block;width:100%;font:inherit;font-size:13.5px;color:var(--ink2);padding:14px 16px;border:1px dashed var(--gold-lt);background:#fff;cursor:pointer}
.fm input[type=file]::file-selector-button{font:inherit;font-size:13px;letter-spacing:.08em;margin-right:14px;padding:8px 16px;border:1px solid var(--sumi);background:transparent;color:var(--sumi);cursor:pointer}
.fm-note{margin-top:10px;font-size:12.5px;line-height:1.9;color:var(--muted)}