/* 説明パネル「アトリエの台紙」
   街の看板と同じ言葉で作る：深い色の地に真鍮の二重の枠／建物ごとの色／縦書き／明朝の組み。
   紙の質感・日本語の折り返し・文字の大きさの強弱まで、すべて街の世界に合わせる。 */

#detail.hp{
  --paper:#f6efe0; --ink:#33303a; --soft:#6c6157; --brass:#b39a6b; --brassd:#86693a; --rule:#dccdb0; --green:#344940;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; --en:Georgia,"Times New Roman",serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='ur%6C(%23n)'/%3E%3C/svg%3E");
  width:min(780px,92vw); max-height:88svh; padding:0; border:0; border-radius:3px;
  color:var(--ink); font-family:var(--serif); font-size:16px;
  background:var(--grain),radial-gradient(120% 70% at 50% -12%,#fbf6e9,transparent 62%),var(--paper);
  box-shadow:0 34px 90px rgba(21,16,28,.55),0 8px 22px rgba(21,16,28,.28);
  overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--brass) transparent;
}
#detail.hp.works-dialog{width:min(1040px,94vw);max-height:90svh;padding:0}
#detail.hp::-webkit-scrollbar{width:9px} #detail.hp::-webkit-scrollbar-track{background:transparent}
#detail.hp::-webkit-scrollbar-thumb{background:var(--brass);border-radius:9px;border:2px solid transparent;background-clip:content-box}
#detail.hp ::selection{background:#e8d29a;color:#2a2530}

/* ── 閉じるボタン：真鍮の縁の丸いメダル ───────────── */
#detail.hp .dialog-toolbar{position:sticky;top:0;z-index:20;height:0;margin:0;padding:0;border:0;background:none;display:block}
#detail.hp #close{position:absolute;right:18px;top:18px;width:46px;height:46px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:#2e4137;color:#f6ead0;font-size:0;cursor:pointer;box-shadow:inset 0 0 0 2px var(--brass),0 6px 14px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s}
#detail.hp #close span{font:300 26px/1 var(--en);transform:translateY(-1px)}
#detail.hp #close:hover{background:#3d5649;transform:rotate(90deg)}
#detail.hp #close:focus-visible,#detail.hp button:focus-visible,#detail.hp a:focus-visible{outline:3px solid #c9a35a;outline-offset:3px}

/* ── 上部の「看板の板」 ───────────────────────── */
#detail.hp .hp-plate{--tone:#394e44;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;
  padding:44px 92px 44px 50px;color:#f6ead0;border-radius:3px 3px 0 0;background-color:var(--tone);
  background-image:
    radial-gradient(circle,#dcc99b 0 2.3px,rgba(0,0,0,.32) 2.9px,transparent 3.6px),
    radial-gradient(circle,#dcc99b 0 2.3px,rgba(0,0,0,.32) 2.9px,transparent 3.6px),
    radial-gradient(circle,#dcc99b 0 2.3px,rgba(0,0,0,.32) 2.9px,transparent 3.6px),
    radial-gradient(circle,#dcc99b 0 2.3px,rgba(0,0,0,.32) 2.9px,transparent 3.6px),
    repeating-linear-gradient(96deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px),
    radial-gradient(120% 170% at 10% -20%,rgba(255,255,255,.14),transparent 56%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,no-repeat;
  background-size:9px 9px,9px 9px,9px 9px,9px 9px,auto,auto;
  background-position:24px 24px,calc(100% - 24px) 24px,24px calc(100% - 24px),calc(100% - 24px) calc(100% - 24px),0 0,0 0}
#detail.hp .hp-plate::before{content:"";position:absolute;inset:13px;border:2px solid var(--brass);pointer-events:none}
#detail.hp .hp-plate::after{content:"";position:absolute;inset:19px;border:1px solid rgba(179,154,107,.55);pointer-events:none}
#detail.hp .hp-plate[data-tone="works"]{--tone:#394e44}
#detail.hp .hp-plate[data-tone="process"]{--tone:#6e4a41}
#detail.hp .hp-plate[data-tone="contact"]{--tone:#5b5246}
#detail.hp .hp-plate[data-tone="about"]{--tone:#344940}
#detail.hp .hp-plate-no{font:italic 400 96px/1 var(--en);color:rgba(246,234,208,.2);letter-spacing:-.03em;margin:0}
#detail.hp .hp-plate-en{margin:0;font:italic 400 17px/1 var(--en);letter-spacing:.34em;text-transform:uppercase;color:#dcc99b}
#detail.hp .hp-plate h2,#detail.hp .hp-plate-jp{margin:14px 0 0;padding:0;font:600 50px/1.25 var(--serif);letter-spacing:.08em;color:#fcf4df;text-shadow:0 1px 0 rgba(0,0,0,.28);text-wrap:balance;word-break:auto-phrase}
#detail.hp:not(.works-dialog) .hp-plate h2{font-size:42px}
#detail.hp .hp-plate-tate{writing-mode:vertical-rl;margin:0;font:400 11px/1 var(--en);letter-spacing:.5em;color:var(--brass)}
#detail.hp .hp-plate:has(.hp-plate-jp){padding-top:30px;padding-bottom:30px}
#detail.hp .hp-plate:has(.hp-plate-jp) .hp-plate-no{font-size:64px}
#detail.hp .hp-plate-jp{font-size:28px;margin-top:10px}
#detail.hp .hp-plate-text:has(h2)::after{content:"";display:block;width:128px;height:1px;margin-top:22px;background:linear-gradient(90deg,var(--brass),transparent)}

/* ── 本文の紙 ─────────────────────────────── */
#detail.hp .hp-body{padding:48px 60px 44px}
#detail.hp.works-dialog .hp-body{padding:50px 68px 46px}
#detail.hp p{margin:0 0 1.1em;font:400 16px/2.05 var(--serif);color:var(--ink);text-wrap:pretty;word-break:auto-phrase;line-break:strict}
#detail.hp h2,#detail.hp h3,#detail.hp h4{font-family:var(--serif);color:var(--ink);word-break:auto-phrase}
#detail.hp h3{margin:0 0 .7em;font-weight:600;font-size:21px;line-height:1.55;letter-spacing:.05em}
#detail.hp h4{margin:1.6em 0 .5em;font-weight:600;font-size:15px;letter-spacing:.1em;color:var(--brassd)}
#detail.hp .hp-lead{font:500 20px/2.05 var(--serif);max-width:30em;margin:0 0 38px;letter-spacing:.03em}
#detail.hp .hp-label{margin:0 0 10px;font:italic 400 14px/1.4 var(--en);letter-spacing:.22em;color:var(--brassd)}
#detail.hp .hp-no{margin:0 0 6px;font:italic 400 40px/1 var(--en);color:var(--brass);letter-spacing:.01em}
#detail.hp .hp-kind{margin:0 0 8px;font:500 12px/1.6 var(--serif);letter-spacing:.26em;color:var(--brassd)}
#detail.hp .hp-meta{display:flex;flex-wrap:wrap;margin:6px 0 0;font:500 13px/1.8 var(--serif);letter-spacing:.1em;color:var(--soft)}
#detail.hp .hp-meta>span+span::before{content:"／";margin:0 .65em;color:var(--brass)}

/* 一覧：額装した作品を、片側に寄せて並べる（枠つきカードの羅列にしない） */
#detail.hp .hp-exhibit{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:50px;align-items:center;padding:40px 0;border-top:1px solid var(--rule)}
#detail.hp .hp-exhibit:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
#detail.hp .hp-exhibit:nth-of-type(even) .hp-print{order:2}
#detail.hp .hp-exhibit-text h3{font-size:29px;font-weight:600;line-height:1.45;letter-spacing:.04em;margin:0 0 .5em}
#detail.hp .hp-sum{font-size:15.5px;line-height:2;color:var(--soft);margin:0 0 .6em}
#detail.hp .hp-more{margin-top:18px;appearance:none;background:none;border:0;border-bottom:1px solid var(--brass);padding:5px 0;font:500 15px/1.6 var(--serif);letter-spacing:.1em;color:var(--brassd);cursor:pointer}
#detail.hp .hp-more span{display:inline-block;transition:transform .25s}
#detail.hp .hp-exhibit:hover .hp-more span{transform:translateX(6px)}

/* 作品は「台紙に貼った印刷」：白い縁・少し傾け・マスキングテープ */
#detail.hp .hp-print{position:relative;display:block;appearance:none;width:100%;padding:14px;border:0;background:#fffdf7;color:inherit;cursor:pointer;text-align:left;
  transform:rotate(var(--r,-.6deg));transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
  box-shadow:0 16px 30px rgba(70,48,24,.2),0 2px 4px rgba(70,48,24,.14)}
#detail.hp .hp-print:hover{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-5px);box-shadow:0 24px 40px rgba(70,48,24,.26),0 3px 6px rgba(70,48,24,.14)}
#detail.hp .hp-print::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.32),transparent 62%)}
#detail.hp .hp-print:hover::after{opacity:1}
#detail.hp .hp-tape{position:absolute;z-index:2;top:-13px;left:50%;width:92px;height:26px;margin-left:-46px;transform:rotate(-2.5deg);
  background:linear-gradient(90deg,rgba(214,196,150,.7),rgba(226,210,168,.62));box-shadow:0 1px 2px rgba(60,40,20,.15);
  clip-path:polygon(0 8%,3% 0,6% 10%,9% 0,100% 0,100% 100%,9% 100%,6% 90%,3% 100%,0 92%)}
#detail.hp .hp-shot{display:block;overflow:hidden;background:#e9e3d3;border:1px solid rgba(60,40,20,.1)}
#detail.hp .hp-shot img{display:block;width:100%;height:auto}

/* スマホLP：壁に貼ったポスターのように、少しずつ傾けて並べる */
#detail.hp .hp-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:34px 0 14px;border-top:1px solid var(--rule)}
#detail.hp .hp-poster{margin:0;transform:translateY(var(--y,0))}
#detail.hp .hp-poster .hp-print{--r:var(--rot,0deg);padding:11px}
#detail.hp .hp-print.is-poster .hp-shot{aspect-ratio:9/15}
#detail.hp .hp-print.is-poster .hp-shot img{height:100%;object-fit:cover;object-position:top}
#detail.hp .hp-poster figcaption{display:grid;gap:3px;margin-top:22px}
#detail.hp .hp-poster figcaption .hp-no{font-size:26px;margin:0}
#detail.hp .hp-poster figcaption strong{font:600 17px/1.55 var(--serif);letter-spacing:.04em}
#detail.hp .hp-poster figcaption .hp-kind{margin:0}
#detail.hp .hp-poster figcaption .hp-sum{margin:.5em 0 0;font-size:14.5px;line-height:1.9}
#detail.hp .hp-poster figcaption .hp-meta{margin:.4em 0 0}
#detail.hp .hp-note{margin:30px 0 8px;padding:6px 0 6px 22px;border-left:3px solid var(--brass);font-size:15px;color:var(--soft)}

/* 下の行き先 */
#detail.hp .hp-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin:36px 0 18px;padding-top:30px;border-top:1px solid var(--rule)}
#detail.hp .hp-cta{appearance:none;display:inline-flex;align-items:center;gap:.9em;padding:17px 28px;border:0;border-radius:2px;background:var(--green);color:#f6ead0;font:600 15px/1.2 var(--serif);letter-spacing:.12em;cursor:pointer;text-decoration:none;
  box-shadow:inset 0 0 0 1.5px var(--brass),0 8px 18px rgba(40,50,44,.25);transition:background .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
#detail.hp .hp-cta:hover{background:#3f5a4c;transform:translateY(-2px)}
#detail.hp .hp-cta span{display:inline-block;transition:transform .25s}
#detail.hp .hp-cta:hover span{transform:translateX(6px)}
#detail.hp .hp-link{appearance:none;background:none;border:0;border-bottom:1px solid var(--brass);padding:5px 0;font:500 15px/1.6 var(--serif);letter-spacing:.08em;color:var(--brassd);cursor:pointer}
#detail.hp .hp-link span{display:inline-block;transition:transform .25s}
#detail.hp .hp-link:hover span{transform:translateX(5px)}
#detail.hp .hp-link.is-quiet{display:block;margin:6px 0 0;font-size:14px;color:var(--soft)}
#detail.hp .hp-back{appearance:none;background:none;border:0;padding:0 0 3px;margin:0 0 30px;border-bottom:1px solid var(--brass);font:500 14px/1.6 var(--serif);letter-spacing:.1em;color:var(--brassd);cursor:pointer}

/* 作品の詳細 */
#detail.hp .hp-head{margin-bottom:34px}
#detail.hp .hp-head h2{text-wrap:balance;margin:0 0 .5em;font:600 34px/1.45 var(--serif);letter-spacing:.04em;color:var(--green)}
#detail.hp .hp-head .hp-lead{font-size:18px;margin:0 0 14px}
#detail.hp .hp-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;align-items:start}
#detail.hp .hp-detail.is-phone{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
#detail.hp .hp-detail.is-phone .hp-stage{order:-1}
#detail.hp .hp-stage{position:sticky;top:30px}
#detail.hp .hp-monitor{position:relative;margin-bottom:26px;padding:12px;border-radius:12px;background:linear-gradient(#37383d,#212226);box-shadow:0 20px 38px rgba(30,24,20,.34)}
#detail.hp .hp-monitor .hp-shot{border:0;border-radius:3px;background:#fff}
#detail.hp .hp-monitor::after{content:"";position:absolute;left:50%;bottom:-20px;width:96px;height:20px;margin-left:-48px;background:linear-gradient(#c5bdac,#8c8474);clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)}
#detail.hp .hp-stand{display:none}
#detail.hp .hp-phone{width:min(300px,100%);margin:0 auto 6px;padding:11px;border-radius:40px;background:#25262a;box-shadow:inset 0 0 0 2px #3c3e44,0 20px 38px rgba(30,24,20,.34)}
#detail.hp .hp-phone .hp-shot{border:0;border-radius:30px;max-height:560px;overflow-y:auto;scrollbar-width:none;background:#fff}
#detail.hp .hp-caption{margin:22px 0 10px;font-size:12.5px;line-height:1.9;color:var(--soft)}
#detail.hp .work-public-link{display:inline-block;padding:5px 0;border-bottom:1px solid var(--brass);font:500 15px/1.6 var(--serif);letter-spacing:.08em;color:var(--brassd);text-decoration:none}
#detail.hp .work-public-link span{font-size:12px;color:var(--soft)}
#detail.hp .work-public-pending{font-size:13px;color:var(--soft)}
#detail.hp .hp-story{list-style:none;margin:0;padding:0}
#detail.hp .hp-story li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:6px;padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--rule)}
#detail.hp .hp-story li:last-child{border-bottom:0;margin-bottom:0}
#detail.hp .hp-num{grid-row:span 2;font:italic 400 34px/1.1 var(--en);color:var(--brass)}
#detail.hp .hp-story h3{margin:0 0 .35em;font-size:20px}
#detail.hp .hp-story p{margin:0;font-size:15.5px;line-height:2}
#detail.hp .hp-consult{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:50px;padding:28px 32px;border:1.5px dashed var(--brass);background:rgba(255,252,243,.55)}
#detail.hp .hp-consult h3{margin:0 0 .3em;font-size:19px}
#detail.hp .hp-consult p{margin:0;font-size:14px;line-height:1.9;color:var(--soft)}

/* 相談・AI活用・比較 */
#detail.hp .hp-letter{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:start;padding:6px 0 42px;border-bottom:1px solid var(--rule)}
#detail.hp .hp-tate-quote{writing-mode:vertical-rl;margin:0;padding:0 26px 0 0;border-right:2px solid var(--brass);font:600 27px/1.75 var(--serif);letter-spacing:.14em;color:var(--green);text-wrap:balance}
#detail.hp .hp-name{display:flex;align-items:center;margin:0 0 .9em;font:600 27px/1.4 var(--serif);letter-spacing:.07em}
#detail.hp .hp-seal{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:16px;border-radius:50%;border:2px solid #a8523c;color:#a8523c;font:italic 15px/1 var(--en);transform:rotate(-8deg);box-shadow:inset 0 0 0 2px rgba(168,82,60,.22);opacity:.92}
/* 制作者の紹介：上に、ひと言（横書き）。その下に、顔写真と紹介文を、左右に並べる */
#detail.hp .hp-letter.has-portrait{grid-template-columns:minmax(172px,214px) minmax(0,1fr);gap:34px 48px;align-items:center}
#detail.hp .hp-letter.has-portrait .hp-tate-quote{grid-column:1/-1;writing-mode:horizontal-tb;padding:2px 0 2px 24px;border-right:0;border-left:3px solid var(--brass);font-size:26px;line-height:1.7;letter-spacing:.1em}
#detail.hp .hp-letter.has-portrait .hp-portrait{grid-column:1;grid-row:2;margin:12px 0 8px 6px}
#detail.hp .hp-letter.has-portrait .hp-letter-body{grid-column:2;grid-row:2}
#detail.hp .hp-letter.has-portrait .hp-name{margin-bottom:.7em}
#detail.hp .hp-portrait{position:relative;padding:11px 11px 12px;background:#fffdf7;rotate:1.8deg;box-shadow:0 16px 30px rgba(70,48,24,.22),0 2px 6px rgba(70,48,24,.14)}
#detail.hp .hp-portrait img{display:block;width:100%;height:auto;aspect-ratio:1122/1402;object-fit:cover;filter:saturate(.94)}
#detail.hp .hp-aside{margin:38px 0;padding:6px 0 6px 28px;border-left:3px solid var(--brass)}
#detail.hp .hp-aside h3{font-size:21px}
#detail.hp .hp-aside p{font-size:15.5px;color:var(--soft)}
#detail.hp .hp-aside .hp-link{margin-top:6px}
#detail.hp .hp-sec{margin:52px 0 10px;font-size:29px;font-weight:600;letter-spacing:.06em;color:var(--green)}
#detail.hp .hp-sec-lead{color:var(--soft);font-size:15.5px}
#detail.hp .hp-menu{list-style:none;margin:24px 0 14px;padding:0;border-top:1px solid var(--rule)}
#detail.hp .hp-menu-row{appearance:none;display:flex;align-items:baseline;gap:18px;width:100%;padding:19px 8px;border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;cursor:pointer;
  font:500 20px/1.5 var(--serif);letter-spacing:.06em;color:var(--ink);transition:background .25s,padding-left .3s cubic-bezier(.2,.7,.2,1)}
#detail.hp .hp-menu-no{font:italic 400 16px/1 var(--en);color:var(--brass)}
#detail.hp .hp-menu-dots{flex:1;min-width:24px;align-self:flex-end;margin-bottom:9px;border-bottom:2px dotted rgba(179,154,107,.7)}
#detail.hp .hp-menu-mark{font:400 19px/1 var(--en);color:var(--brassd);transition:transform .25s}
#detail.hp .hp-menu-row:hover{background:rgba(179,154,107,.11);padding-left:16px}
#detail.hp .hp-menu-row:hover .hp-menu-mark{transform:translateX(5px)}
#detail.hp .hp-menu-row[aria-pressed="true"]{color:var(--green);background:rgba(52,73,64,.08)}
#detail.hp .hp-context{margin:22px 0;padding:18px 24px;border-left:3px solid var(--green);background:rgba(52,73,64,.07)}
#detail.hp .hp-context h3{margin:0 0 .2em;font-size:20px}
#detail.hp .hp-context p{margin:.3em 0 0;font-size:14px}
#detail.hp .hp-prep{margin:42px 0 36px}
#detail.hp .hp-prep ul{margin:0 0 1.2em;padding:0;list-style:none}
#detail.hp .hp-prep li{position:relative;padding:10px 0 10px 28px;border-bottom:1px dashed rgba(179,154,107,.7);font-size:16px;line-height:1.8}
#detail.hp .hp-prep li::before{content:"";position:absolute;left:5px;top:20px;width:8px;height:8px;background:var(--brass);transform:rotate(45deg)}
#detail.hp .hp-prep p{font-size:14.5px;color:var(--soft)}
#detail.hp .hp-send{margin:34px 0 10px}
#detail.hp .hp-send>p{margin:16px 0 0;font-size:13.5px;color:var(--soft);line-height:1.9}
#detail.hp .room-social{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
#detail.hp .room-social-caption{font:500 14px/1.8 var(--serif);color:var(--soft);letter-spacing:.06em}
#detail.hp .hp-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
#detail.hp .hp-foot summary{cursor:pointer;font:500 13.5px/1.8 var(--serif);color:var(--soft);letter-spacing:.06em}
#detail.hp .hp-foot p{font-size:13.5px;color:var(--soft);margin:10px 0 0}

#detail.hp .hp-statement{margin:0 0 34px;font:600 44px/1.55 var(--serif);letter-spacing:.06em;color:var(--green);text-wrap:balance;word-break:auto-phrase}
#detail.hp .hp-statement.is-h2{font-size:34px;margin-bottom:22px}
#detail.hp .hp-prose p,#detail.hp .hp-prose-p{font-size:16.5px;max-width:34em;color:var(--ink)}
#detail.hp .hp-steps-block{margin:42px 0 10px;padding:30px 34px 14px;background:rgba(255,252,243,.6);border:1px solid var(--rule)}
#detail.hp .hp-steps-block h3{margin-bottom:.2em}
#detail.hp .hp-steps{list-style:none;margin:0;padding:0}
#detail.hp .hp-steps li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;padding:16px 0;border-bottom:1px dashed rgba(179,154,107,.75);font-size:17px;line-height:1.9}
#detail.hp .hp-steps li:last-child{border-bottom:0}
#detail.hp .hp-steps .hp-num{grid-row:auto;font-size:28px}
#detail.hp .hp-compare{display:grid;grid-template-columns:1fr 1fr;margin:34px 0 36px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
#detail.hp .hp-compare>section{padding:34px 36px 30px 0}
#detail.hp .hp-compare>section+section{padding:34px 0 30px 40px;border-left:1px solid var(--rule)}
#detail.hp .hp-compare h3{font-size:26px;color:var(--green)}
#detail.hp .hp-compare p{font-size:15.5px;color:var(--ink)}

/* 戻るボタン */
#detail.hp #return{display:block;margin:0 auto 38px;padding:6px 4px;border:0;border-bottom:1px solid var(--brass);border-radius:0;background:none;font:500 14px/1.6 var(--serif);letter-spacing:.14em;color:var(--brassd);cursor:pointer}

/* ── スマホ幅 ───────────────────────────── */
@media(max-width:720px){
  #detail.hp,#detail.hp.works-dialog{width:94vw;max-height:90svh}
  #detail.hp .hp-plate{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:32px 70px 32px 28px}
  #detail.hp .hp-plate-tate{display:none}
  #detail.hp .hp-plate-no{font-size:46px}
  #detail.hp .hp-plate h2,#detail.hp:not(.works-dialog) .hp-plate h2{font-size:25px}
  #detail.hp .hp-plate{gap:12px;padding:28px 66px 28px 24px}
  #detail.hp .hp-plate-jp{font-size:22px}
  #detail.hp .hp-body,#detail.hp.works-dialog .hp-body{padding:30px 22px 30px}
  #detail.hp .hp-lead{font-size:17px}
  #detail.hp .hp-exhibit,#detail.hp .hp-exhibit:nth-of-type(even){grid-template-columns:1fr;gap:28px;padding:34px 0}
  #detail.hp .hp-exhibit:nth-of-type(even) .hp-print{order:0}
  #detail.hp .hp-board{grid-template-columns:1fr;gap:40px}
  #detail.hp .hp-poster{transform:none}
  #detail.hp .hp-print.is-poster .hp-shot{aspect-ratio:9/12}
  #detail.hp .hp-detail,#detail.hp .hp-detail.is-phone{grid-template-columns:1fr;gap:34px}
  #detail.hp .hp-stage{position:static;order:-1}
  #detail.hp .hp-head h2{font-size:28px}
  #detail.hp .hp-consult{flex-direction:column;align-items:stretch;padding:22px}
  #detail.hp .hp-cta{justify-content:center}
  #detail.hp .hp-letter,#detail.hp .hp-letter.has-portrait{grid-template-columns:1fr;gap:24px}
  #detail.hp .hp-letter.has-portrait .hp-tate-quote{font-size:22px;line-height:1.75;padding:2px 0 2px 18px;border-bottom:0}
  #detail.hp .hp-letter.has-portrait .hp-portrait{grid-column:1;grid-row:auto;order:2;width:min(210px,62%);margin:6px 0 0 6px}
  #detail.hp .hp-letter.has-portrait .hp-letter-body{grid-column:1;grid-row:auto;order:3}
  #detail.hp .hp-tate-quote{writing-mode:horizontal-tb;padding:0 0 18px;border-right:0;border-bottom:2px solid var(--brass);font-size:23px;line-height:1.8}
  #detail.hp .hp-statement{font-size:30px}
  #detail.hp .hp-statement.is-h2{font-size:25px}
  #detail.hp .hp-compare{grid-template-columns:1fr}
  #detail.hp .hp-compare>section,#detail.hp .hp-compare>section+section{padding:28px 0;border-left:0}
  #detail.hp .hp-compare>section+section{border-top:1px solid var(--rule)}
  #detail.hp .hp-steps-block{padding:22px 20px 8px}
  #detail.hp .hp-menu-row{font-size:18px}
  #detail.hp .room-social{flex-direction:column;align-items:flex-start}
}

/* 背の低い画面（ノートPCの小さめの窓など）：看板の板が高さの半分を占めないよう、少し低くする */
@media(min-width:721px) and (max-height:700px){
  #detail.hp .hp-plate{padding-top:28px;padding-bottom:28px}
  #detail.hp .hp-plate-no{font-size:68px}
  #detail.hp .hp-plate h2,#detail.hp:not(.works-dialog) .hp-plate h2{font-size:36px;margin-top:8px}
  #detail.hp .hp-plate-text:has(h2)::after{margin-top:14px}
  #detail.hp .hp-body,#detail.hp.works-dialog .hp-body{padding-top:36px}
}

/* 動きを減らす設定：小さな動き（ホバーの移り変わりなど）も止める */
@media (prefers-reduced-motion:reduce){#detail.hp *,#detail.hp *::before,#detail.hp *::after{transition:none!important;animation:none!important}}