/* ひみつ工房(新トップ / の節 #secret-workshop。2026/10/23 ★ハミルトン T28)。
   採用元 abc_workshop/preview/section.css(GPT の試作)を写し、①.hm- 以外の指定は入れない ②投票・ハート・閲覧数・トースト・使われていない呼吸の keyframes を落とした ③窓は既存の #detail-dialog を使い回すので、.hm-dialog 系は #detail-dialog .hm-detail 配下の指定に書き直した(home.css の dialog{} と両立)
   ④「つくっているお話 →」は .hm-story-open ⑤字体は試作のまま(home.css と同じ丸ゴシックの並び) ⑥prefers-reduced-motion は残す ⑦絵は contain だけで出し、切り取る指定(cover)は使わない(耳・足・しっぽを残す) */
.hm-workshop{--hm-ink:#344c41;--hm-muted:#757567;--hm-paper:#fffcf3;--hm-green:#47634f;--hm-orange:#a15d3d;--hm-line:#d8d2ba;position:relative;background:#f3efdf;color:var(--hm-ink);padding:32px 0 0;isolation:isolate;font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;overflow:hidden}
.hm-workshop::before{content:"";position:absolute;top:-16px;left:0;width:100%;height:32px;background:radial-gradient(circle at 16px 0,transparent 15px,#f3efdf 16px);background-size:32px 32px;z-index:-1}
.hm-workshop *,.hm-workshop *::before,.hm-workshop *::after{box-sizing:border-box}
.hm-workshop p,.hm-workshop h3,.hm-workshop h4{margin-block-start:0}
.hm-workshop button{font-family:inherit;cursor:pointer}
.hm-workshop img{display:block}
.hm-shell{width:min(1160px,calc(100% - 64px));margin:auto}
.hm-doorline{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--hm-line);padding:0 0 22px;font-size:10px;font-weight:700;letter-spacing:.15em}
.hm-open{display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.06em}.hm-open i{width:7px;height:7px;background:#759b65;border-radius:50%;box-shadow:0 0 0 4px #759b6515}
.hm-intro{text-align:center;padding:40px 0 30px}
.hm-eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;color:#79755a;line-height:1.8}
.hm-intro h2{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.5;letter-spacing:.09em;margin:16px 0 16px;color:#3b5945}
.hm-lead{font-size:20px;letter-spacing:.08em;font-weight:700;margin:17px 0}.hm-opening{font-size:13px;line-height:2.2;color:#6b7260}.hm-mobile-break{display:none}
/* 工房の窓(絵)と、その下の日記 */
.hm-scene{overflow:hidden;border:1px solid #d4c9ae;background:#fffaf0;border-radius:22px;box-shadow:0 18px 40px #78694712}
.hm-scene-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px;background:#eeead7;color:#72664e}
.hm-chapter{font-size:11px;letter-spacing:.12em;white-space:nowrap}.hm-chapter b{font:italic 24px/1 Georgia,serif;margin-left:10px;color:#94764b}.hm-date{font-size:11px;letter-spacing:.08em}
.hm-workshop-photo{margin:0;position:relative;background:#8b6439}.hm-workshop-photo>img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
.hm-workshop-photo figcaption{display:flex;align-items:center;justify-content:center;gap:10px;background:#4d503c;color:#f9f0d8;font-size:11px;letter-spacing:.1em;padding:12px 20px;line-height:1.8}
.hm-photo-dot{width:6px;height:6px;border-radius:50%;background:#f3cf85;box-shadow:0 0 10px #ffd16e99;flex-shrink:0}
.hm-diary{padding:26px 34px 29px}.hm-diary-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.hm-diary-label{font-size:11px;letter-spacing:.12em;font-weight:700;color:#8b795c;white-space:nowrap}
.hm-story-steps{display:flex;gap:8px;flex-wrap:wrap}.hm-story-steps button{display:flex;align-items:center;gap:7px;padding:6px 12px;min-height:42px;border:1px solid transparent;border-radius:30px;background:transparent;font-size:11px;color:#777965;transition:background .2s}.hm-story-steps button span{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;background:#eee9d9;color:#8a7d64;font:italic 13px Georgia,serif}.hm-story-steps button:hover{background:#f0ebdc}.hm-story-steps button[aria-pressed=true]{background:#f3e6c4;border-color:#dfcca0;color:#695a3c}.hm-story-steps button[aria-pressed=true] span{background:#b18b4c;color:white}
.hm-story-strip{display:grid;grid-template-columns:72px 1fr 44px;gap:23px;align-items:center;margin:19px 0 0;padding-top:22px;border-top:1px dashed #d7ceb6}.hm-story-index{font:italic 18px Georgia,serif;color:#a3875a;white-space:nowrap}.hm-story-title{font-size:16px;font-weight:700;margin:0 0 7px;line-height:1.8}.hm-story-strip p:not(.hm-story-title){font-size:12px;line-height:2;color:#777362;margin:0;min-height:48px}.hm-next{display:grid;place-items:center;height:44px;width:44px;border-radius:50%;border:1px solid #c5c8ad;background:#ecedda;font-size:23px;color:#5a6c4d;line-height:1;transition:background .2s}.hm-next:hover{background:#dde5cb}
/* 棚(作品 A〜D) */
.hm-shelf-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:77px 0 16px}.hm-shelf-heading h3{font-size:27px;line-height:1.6;letter-spacing:.06em;margin-top:10px}.hm-shelf-heading>p{font-size:12px;line-height:2.1;color:#797b69}
.hm-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.hm-product{background:#fffcf3;border:1px solid #dfdac5;box-shadow:0 8px 14px #74694706;border-radius:10px 10px 4px 4px;overflow:hidden;min-width:0;transition:transform .25s,box-shadow .25s}.hm-product:hover{transform:translateY(-4px);box-shadow:0 12px 26px #74694710}
.hm-product-art{display:block;width:100%;aspect-ratio:1;border:0;border-radius:0;background:#e9e5dc;position:relative;overflow:hidden;cursor:pointer;padding:0}
.hm-product-art>img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;transform:none!important}
.hm-product-code{position:absolute;left:18px;top:18px;padding:7px 11px;background:#fffdf2e8;border:1px solid #ffffffb5;color:#7b735e;font-size:10px;letter-spacing:.09em;border-radius:3px}.hm-product-code b{font:700 16px/1 Georgia,serif;padding-left:5px;color:#4c6453}
.hm-art-more{position:absolute;right:15px;bottom:13px;font-size:10px;background:#fffdf2e8;padding:5px 10px;border-radius:20px;color:#665944}
.hm-product-content{padding:25px 26px 22px}
.hm-state{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:#71805b;letter-spacing:.05em}.hm-state::before{content:"";height:5px;width:5px;background:#a5ad85;border-radius:50%}
.hm-product h4{font-size:23px;line-height:1.5;font-weight:800;letter-spacing:.04em;margin:12px 0 8px}.hm-product-sub{font-size:11px;color:#9b6c43;line-height:1.8;font-weight:700}.hm-product-note{font-size:12px;line-height:2;color:#77796a;margin:16px 0 22px;min-height:48px}
.hm-story-open{border:0;border-radius:0;background:none;padding:4px 0;color:#6f735b;font-size:11px;border-bottom:1px solid #d8d4bf;line-height:1.8;letter-spacing:.02em}.hm-story-open:hover{color:#4c6453;border-bottom-color:#9fa58a}
.hm-concept-info{font-size:10px;color:#7d7968;line-height:1.9;margin:22px 0 0}
/* いつか、画面の向こうから */
.hm-delivery{display:grid;grid-template-columns:115px 1fr 160px;gap:42px;align-items:center;border-top:1px solid #d3ceb8;border-bottom:1px solid #d3ceb8;margin-top:80px;padding:45px 18px}
.hm-delivery-number{font:14px/1.7 Georgia,serif;letter-spacing:.16em;color:#a99976}.hm-delivery-number span{display:block;font-size:44px;font-weight:400;letter-spacing:0;margin-top:13px}
.hm-delivery-copy h3{font-size:27px;line-height:1.8;letter-spacing:.09em;margin:9px 0 20px}.hm-delivery-copy>p:not(.hm-eyebrow){font-size:12px;line-height:2.2;color:#72745f}.hm-delivery-copy .hm-delivery-note{font-size:10px!important;color:#8d8770!important;margin-top:15px}
.hm-postscript{text-align:center;transform:rotate(3deg)}.hm-portrait-small{width:150px;max-width:100%;aspect-ratio:1;position:relative;overflow:hidden;margin:auto;border-radius:50%;background:#eae5da}.hm-portrait-small img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain}
.hm-postscript p{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:600;font-size:15px;line-height:2;letter-spacing:.13em;color:#8c7e5d}
.hm-section-end{display:flex;justify-content:space-between;padding:28px 0 36px;font-size:10px;letter-spacing:.09em;color:#8a806a}.hm-section-end a{color:#6b7757;text-decoration:none}.hm-section-end a:hover{text-decoration:underline}
.hm-workshop button:focus-visible,.hm-workshop a:focus-visible{outline:3px solid #416e53;outline-offset:4px}.hm-workshop a:active{opacity:.7}
.hm-workshop a:visited{color:#6b7757}.hm-workshop a:focus-visible{color:#344c41}.hm-workshop a:active{color:#344c41}
/* 「つくっているお話」の窓(既存の #detail-dialog の中身。home.css の .dialog-body の指定より強くする) */
#detail-dialog .hm-detail{font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;color:#3c5145}
#detail-dialog .hm-detail *{box-sizing:border-box}
#detail-dialog .hm-detail img{display:block}
#detail-dialog .hm-detail .hm-dialog-art{height:auto;aspect-ratio:1;max-width:440px;margin:0 auto 25px;background:#e9e5dc;border-radius:7px;overflow:hidden;position:relative}
#detail-dialog .hm-detail .hm-dialog-art>img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
#detail-dialog .hm-detail .hm-eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;color:#79755a;line-height:1.8;margin:0}
#detail-dialog .hm-detail h2{font-size:26px;line-height:1.7;letter-spacing:.06em;margin:8px 0;color:#405c48;font-weight:800}
#detail-dialog .hm-detail .hm-dialog-sub{font-size:13px;line-height:1.9;color:#aa7648;margin:0 0 20px;font-weight:700}
#detail-dialog .hm-detail .hm-notebook{border-top:1px dashed #cec9ae;border-bottom:1px dashed #cec9ae;padding:18px 0;color:#757562;font-size:13px;line-height:2.2}
#detail-dialog .hm-detail .hm-notebook p{margin:0;font-size:13px;line-height:2.2}#detail-dialog .hm-detail .hm-notebook p+p{margin-top:12px}
#detail-dialog .hm-detail .hm-dialog-note{font-size:10px;line-height:1.9;color:#8b846e;margin:16px 0 0}
@media(max-width:950px){.hm-products{gap:15px}.hm-product-content{padding:19px 17px}.hm-product h4{font-size:18px}.hm-delivery{gap:28px;grid-template-columns:80px 1fr 130px}.hm-delivery-copy h3{font-size:24px}.hm-shelf-heading h3{font-size:24px}.hm-diary{padding:23px}.hm-diary-top{align-items:flex-start;flex-direction:column;gap:12px}.hm-story-strip{gap:18px}}
@media(max-width:700px){.hm-workshop{padding-top:24px}.hm-shell{width:calc(100% - 36px)}.hm-doorline{font-size:7px;letter-spacing:.08em;padding-bottom:17px}.hm-open{font-size:10px;gap:7px}.hm-intro{padding:32px 0 25px}.hm-intro h2{font-size:34px;line-height:1.6;letter-spacing:.08em;margin:14px 0}.hm-mobile-break{display:block}.hm-eyebrow{font-size:9px;letter-spacing:.12em}.hm-lead{font-size:17px;line-height:1.9;margin:14px 0}.hm-opening{font-size:11px;line-height:2.2}.hm-opening br{display:none}
.hm-scene{margin:0 -6px;border-radius:14px}.hm-scene-heading{padding:13px 15px;gap:12px}.hm-chapter{font-size:9px;letter-spacing:.03em}.hm-chapter b{font-size:19px;margin-left:5px}.hm-date{font-size:9px;letter-spacing:0;text-align:right}.hm-workshop-photo figcaption{font-size:9px;letter-spacing:.02em;padding:11px 10px;gap:7px}.hm-diary{padding:21px 18px 23px}.hm-diary-top{gap:13px}.hm-diary-label{font-size:10px;letter-spacing:.08em}.hm-story-steps{width:100%;gap:2px;justify-content:space-between}.hm-story-steps button{font-size:10px;padding:6px 8px;gap:5px;min-height:42px}.hm-story-steps button span{height:20px;width:20px;font-size:12px}.hm-story-strip{grid-template-columns:1fr 40px;gap:9px 12px;margin-top:15px;padding-top:19px}.hm-story-index{grid-column:1/-1;font-size:15px;margin-bottom:4px}.hm-story-title{font-size:14px;line-height:1.8;margin-bottom:7px}.hm-story-strip p:not(.hm-story-title){font-size:11px;line-height:2;min-height:88px}.hm-next{height:40px;width:40px;font-size:22px}
.hm-shelf-heading{display:block;margin:47px 0 16px}.hm-shelf-heading h3{font-size:22px;letter-spacing:.02em;margin-top:8px}.hm-shelf-heading>p{font-size:11px;line-height:2;margin-top:14px}.hm-products{grid-template-columns:1fr;gap:24px}.hm-product-art{aspect-ratio:1}.hm-product-content{padding:23px 24px}.hm-product h4{font-size:22px}.hm-product-sub{font-size:12px}.hm-product-note{font-size:13px;min-height:0;margin:15px 0 22px}.hm-concept-info{font-size:9px;line-height:1.9;margin-top:19px}
.hm-delivery{grid-template-columns:1fr 95px;gap:12px;margin-top:45px;padding:29px 0}.hm-delivery-number{grid-column:1/-1;display:flex;align-items:center;font-size:10px;letter-spacing:.12em;gap:6px}.hm-delivery-number br{display:none}.hm-delivery-number span{font-size:25px;margin:0 0 0 10px}.hm-delivery-copy{grid-column:1/-1}.hm-delivery-copy h3{font-size:23px;line-height:1.9;margin:10px 0 15px}.hm-delivery-copy>p:not(.hm-eyebrow){font-size:11px;line-height:2.2}.hm-delivery-copy>p br{display:none}.hm-postscript{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:19px;transform:rotate(-2deg);margin-top:13px}.hm-portrait-small{width:110px;flex-shrink:0;margin:0}.hm-postscript p{font-size:14px;text-align:left}.hm-section-end{font-size:9px;letter-spacing:0;gap:10px;padding:24px 0 29px}
#detail-dialog .hm-detail h2{font-size:23px}#detail-dialog .hm-detail .hm-dialog-art{height:auto;aspect-ratio:1}#detail-dialog .hm-detail .hm-notebook,#detail-dialog .hm-detail .hm-notebook p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hm-workshop *,#detail-dialog .hm-detail *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}