/* ============================================================
   ハコビヨリ ／ 案件のCSS（site.css のあとに読む）。クラスは hk- 始まり。
   段階の一覧（この値だけから選ぶ）
            特大(FV) 大   中   小   本文  補助
     PC     min(25cqh,15vw)   96   28   21   17    14
     TB     25cqh   64   26   20   17    14
     SP     14cqh   48   22   18   16    13
   色：地 --bg／面 --face／文字 --ink／副 --sub／罫線 --line（詰め図）
       押せる --accent（ラズベリー・仮）／反転面 --flip（ピスタチオ #4A6427・仮。文字は #FBF7F0 で 6.26:1）
   角丸：--r-f（ピル）／ 14px（缶・カード）／ 0
   動き：「蓋が開く」「浮く」。イージング var(--ease)
   ============================================================ */
:root{ --hk-en:96px; --hk-mid:28px; --hk-sm:21px; --hk-bd:17px; --hk-aux:14px; --hk-r:14px; --sec:168px }
@media (max-width:1099px){ :root{ --hk-en:64px; --hk-mid:26px; --hk-sm:20px } }
@media (max-width:767px){ :root{ --hk-en:48px; --hk-mid:22px; --hk-sm:18px; --hk-bd:16px; --hk-aux:13px; --sec:112px } }

body{font-size:var(--hk-bd);line-height:1.95}
.hk-measure{max-width:var(--measure)}

/* ---------- 見出しの形式（サイトでこの1種だけ） ---------- */
.hk-h{display:grid;gap:6px;margin:0 0 28px;font-weight:400}
.hk-h__no{font-family:var(--en);font-size:var(--hk-aux);letter-spacing:.2em;color:var(--sub);display:flex;align-items:center;gap:14px}
.hk-h__no::after{content:"";width:64px;height:1px;background:var(--line)}
.hk-h__en{font-family:var(--dsp);font-size:var(--hk-en);line-height:1.02;letter-spacing:-.01em}
.hk-h__ja{font-size:var(--hk-mid);font-weight:500;line-height:1.5;letter-spacing:.04em;font-feature-settings:"palt"}
.hk-h--on,.hk-h--on .hk-h__no{color:#FBF7F0}
.hk-h--on .hk-h__no::after{background:rgba(243,235,221,.5)}
.hk-lead{font-size:var(--hk-sm);line-height:1.8;margin:0 0 18px}
.hk-bd{margin:0 0 18px;max-width:var(--measure)}

.hk-sec{padding:var(--sec) 0}
.hk-sec+.hk-sec{padding-top:0}
.hk-tins+.hk-sec{padding-top:var(--sec)}

/* ---------- FV ---------- */
.hk-fv{position:relative;height:180svh}
.hk-fv__pin{position:sticky;top:0;height:100svh;overflow:clip;background:var(--bg);clip-path:inset(var(--wy,0px) var(--wx,0px) round var(--wr,0px))}
.hk-scene{pointer-events:none;position:absolute;left:50%;top:50%;translate:-50% -50%;container-type:size;
  width:max(100vw,calc(100svh*16/9));height:max(100svh,calc(100vw*9/16));transform:scale(var(--z,1));transform-origin:46% 52%}
.hk-scene>picture{position:absolute;inset:0;display:block}
.hk-lid>picture{display:block;width:100%;height:100%}
.hk-scene__l,.hk-scene picture>img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.hk-fv__big{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding-top:9cqh;
  font-family:var(--dsp);font-size:min(25cqh,15vw);line-height:1;letter-spacing:-.02em;color:rgba(43,33,24,.24);white-space:nowrap;
  transform:scale(var(--s,1));transform-origin:50% 20%;opacity:var(--bo,1)}
.hk-lid{position:absolute;left:12.05%;top:26.34%;width:68.1%;height:52.2%;filter:drop-shadow(0 .6cqh .8cqh rgba(43,33,24,.28));
  transition:transform 1.35s cubic-bezier(.65,0,.2,1),filter 1.35s var(--ease)}
.hk-lid img{position:static;width:100%;height:100%;max-width:none}
.is-lift .hk-lid{transform:scale(1.035);filter:drop-shadow(0 3cqh 3.2cqh rgba(43,33,24,.32));transition:transform .45s var(--ease),filter .45s var(--ease)}
:is(.is-open,.is-in) .hk-lid{transform:translate(64cqw,-49cqh) rotate(21deg) scale(1.02);filter:drop-shadow(0 1.4cqh 1.8cqh rgba(43,33,24,.3))}
.hk-float{position:absolute;inset:0;pointer-events:none;z-index:3}
.hk-ck{position:absolute;left:calc(var(--x)*1vw);top:calc(var(--y)*1%);width:clamp(calc(var(--w)*6px),calc(var(--w)*1vw),calc(var(--w)*22px));
  transform:translate(calc((46 - var(--x) - var(--w)/2)*1vw),calc((52 - var(--y))*1vh)) scale(.35);opacity:0;
  transition:transform 1.3s var(--ease),opacity .6s;transition-delay:calc(.55s + var(--k)*90ms)}
:is(.is-open,.is-in) .hk-ck{transform:translateY(var(--py,0px));opacity:1;transition-delay:calc(.55s + var(--k)*90ms),calc(.55s + var(--k)*90ms)}
.is-done .hk-ck{transition:none}
.hk-ck img{width:100%;height:auto;filter:drop-shadow(0 18px 18px rgba(43,33,24,.28));animation:hk-bob calc(5.5s + var(--k)*.4s) ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.8s)}
@keyframes hk-bob{from{transform:translateY(-7px) rotate(-5deg)}to{transform:translateY(9px) rotate(4deg)}}
.hk-split span{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i)*55ms + 1.1s)}
:is(.is-open,.is-in) .hk-split span{opacity:1;transform:none}
.hk-fv__copy{position:absolute;z-index:4;left:var(--pad);bottom:clamp(28px,7vh,72px);opacity:var(--o,1)}
.hk-fv__copy h1{font-size:var(--hk-mid);font-weight:500;line-height:1.5;margin:0;font-feature-settings:"palt"}
.hk-fv__copy p{margin:6px 0 0;font-size:var(--hk-aux);color:var(--sub);opacity:0;transition:opacity 1s var(--ease) 2.2s}
:is(.is-open,.is-in) .hk-fv__copy p{opacity:1}
.hk-fv__scroll{position:absolute;z-index:4;right:var(--pad);bottom:22px;margin:0;font-family:var(--en);font-size:var(--hk-aux);letter-spacing:.3em;color:var(--sub);writing-mode:vertical-rl}
.hk-fv__scroll::after{content:"";display:block;width:1px;height:48px;margin:10px auto 0;background:var(--sub);transform-origin:top;animation:hk-drip 2.2s var(--ease) infinite}
@keyframes hk-drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* FVの間はヘッダーを隠す（100万の標準） */
html.hk-top:not(.hd-solid) .hd,html.hk-top:not(.hd-solid) .hd__cta,html.hk-top:not(.hd-solid) .menu{opacity:0;visibility:hidden;pointer-events:none}
.hd,.hd__cta,.menu{transition:opacity .4s var(--ease),visibility .4s,transform .38s var(--ease)}
/* 04 読み込みカウンター */
.hk-open{position:fixed;inset:0;z-index:90;background:var(--bg);transition:background-color .7s var(--ease),opacity .5s var(--ease),visibility .5s}
.hk-open.is-bg{background-color:rgba(243,235,221,0)}
.hk-open.is-gone{opacity:0;visibility:hidden}
.hk-open__c{position:absolute;left:var(--pad);bottom:clamp(28px,7vh,72px);margin:0;display:grid;gap:10px;transition:opacity .5s var(--ease)}
.hk-open.is-bg .hk-open__c{opacity:0}
.hk-open__n{font-family:var(--dsp);font-size:var(--hk-en);line-height:1;font-variant-numeric:tabular-nums}
.hk-open__t{font-family:var(--en);font-size:var(--hk-sm);color:var(--sub);margin-left:10px}

/* ---------- 01 約束 ---------- */
.hk-promise .ct{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.hk-promise__art{position:relative;aspect-ratio:1/1.05;max-width:100%}
.hk-drift{position:absolute;display:block;translate:0 var(--dy,0px);rotate:var(--dr,0deg)}
.hk-drift img{width:100%;filter:drop-shadow(0 18px 18px rgba(43,33,24,.25))}

/* ---------- 02 缶のカード ---------- */
.hk-tins{background:var(--face);padding-top:var(--sec)!important}
.hk-tins__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px;padding:0 8px}
.hk-card{display:grid;gap:4px;background:var(--bg);border:1px solid var(--ink);border-radius:var(--hk-r);padding:18px 18px 22px;transform:rotate(var(--rot));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 10px 0 -4px rgba(43,33,24,.12)}
.hk-card:hover,.hk-card:focus-visible{transform:rotate(0) translateY(-6px);box-shadow:0 16px 0 -4px rgba(43,33,24,.14)}
.hk-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hk-card__img{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--hk-r);overflow:hidden;background:var(--face);margin-bottom:12px}
.hk-card__img--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 52%;transform:scale(1.55);transform-origin:46% 52%}
.hk-card__img--trio,.hk-card__img--four{display:grid;place-items:center;background:var(--flip)}
.hk-card__img--trio{grid-template-columns:repeat(3,1fr);padding:0 8%}
.hk-card__img--four{grid-template-columns:repeat(2,1fr);padding:6% 18%;background:#E7D3B0}
.hk-card__img--trio img,.hk-card__img--four img{width:90%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.22));transition:transform .5s var(--ease)}
.hk-card:hover .hk-card__img img{transform:scale(1.05)}
.hk-card__en{font-family:var(--en);font-size:var(--hk-aux);letter-spacing:.2em;color:var(--sub)}
.hk-card__t{font-size:var(--hk-sm);font-weight:500}
.hk-card__d{color:var(--sub);font-size:var(--hk-aux)}
.hk-card__p{font-family:var(--en);font-size:var(--hk-sm);margin-top:6px;white-space:nowrap}
.hk-card__p small{font-family:var(--ja);font-size:var(--hk-aux);color:var(--sub)}

/* ---------- 03 升目（詰め図） ---------- */
.hk-grid{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.hk-grid li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 12px 16px;display:grid;gap:2px;align-content:start}
.hk-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin-bottom:8px}
.hk-grid b{font-weight:500;font-size:var(--hk-bd);line-height:1.5}
.hk-grid span{font-size:var(--hk-aux);color:var(--sub);line-height:1.6}

/* ---------- 04 工程（止めて見せる／文章が流れる） ---------- */
.hk-proc{position:relative;height:300svh;background:var(--face)}
.hk-proc__pin{position:sticky;top:0;height:100svh;overflow:clip;display:flex;align-items:center}
.hk-proc__in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:100%}
.hk-proc__clock{font-family:var(--dsp);font-size:var(--hk-en);line-height:1;margin:24px 0 18px;font-variant-numeric:tabular-nums}
.hk-proc__bar{display:block;height:3px;background:var(--line);max-width:320px}
.hk-proc__bar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--pp,0))}
.hk-proc__list{list-style:none;margin:0;padding:0;height:60svh;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.hk-proc__list li{display:grid;gap:6px;padding:26px 0;border-bottom:1px solid var(--line);transform:translateY(var(--ly,0px));opacity:.35;transition:opacity .4s var(--ease)}
.hk-proc__list li.is-now{opacity:1}
.hk-proc__list b{font-size:var(--hk-mid);font-weight:500}
.hk-proc__list span{color:var(--sub)}

/* ---------- 05 名入れ ---------- */
.hk-gift{padding-top:var(--sec)!important}
.hk-gift__in{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.hk-gift__fig{margin:0;border-radius:var(--hk-r);overflow:hidden;aspect-ratio:4/5}
.hk-gift__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hk-more{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;
  transition:background-size .5s var(--ease)}
.hk-more::after{content:"→";margin-left:10px}
.hk-more:hover,.hk-more:focus-visible{background-size:100% 1px}

/* ---------- 06 数字 ---------- */

/* ---------- 07 行 ---------- */
.hk-news__in{display:grid;grid-template-columns:5fr 7fr;gap:56px}
.hk-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.hk-rows li{display:grid;grid-template-columns:8.5em 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.hk-rows time{font-family:var(--en);color:var(--sub);font-size:var(--hk-aux);padding-top:3px}

/* ---------- CTA 反転面（1度だけ） ---------- */
.hk-cta{background:var(--flip);color:#FBF7F0;padding:var(--sec) 0}
.hk-cta__btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.hk-btn{display:inline-flex;align-items:center;min-height:56px;padding:0 34px;border-radius:var(--r-f);background:var(--bg);color:var(--accent);font-weight:500;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.hk-btn::after{content:"→";margin-left:12px;transition:transform .35s var(--ease)}
.hk-btn:hover,.hk-btn:focus-visible{background:var(--accent);color:var(--bg)}
.hk-btn:hover::after{transform:translateX(4px)}
.hk-btn:focus-visible{outline:2px solid var(--bg);outline-offset:3px}
.hk-cta__note{font-size:var(--hk-aux)}

@media (max-width:900px){
  .hk-promise .ct,.hk-gift__in,.hk-news__in,.hk-proc__in{grid-template-columns:1fr;gap:32px}
  .hk-promise__art{max-width:420px}
  .hk-tins__row{grid-template-columns:1fr;gap:24px}
  .hk-card{transform:none}
  .hk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hk-proc__list{height:46svh}
  .hk-proc__clock{margin:14px 0 12px}
}
@media (max-width:700px){
  .hk-scene{width:max(100vw,calc(100svh*9/16));height:max(100svh,calc(100vw*16/9));transform-origin:50% 58%}
  .hk-fv__big{font-size:17vw;padding-top:27cqh}
  .hk-lid{left:25.77%;top:23.43%;width:47.8%;height:69.7%}
  :is(.is-open,.is-in) .hk-lid{transform:translate(62cqw,-60cqh) rotate(18deg) scale(1.02)}
  .hk-fv__copy{top:78px;bottom:auto;right:var(--pad)}
  .hk-ck[data-pc]{display:none}
  .hk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hk-rows li{grid-template-columns:1fr;gap:2px}
  .hk-gift__fig{aspect-ratio:4/3}
}
@media (prefers-reduced-motion: reduce){
  .hk-open{display:none}
  .hk-ck,.hk-split span,.hk-lid,.hk-fv__copy p{transition:none!important}
  .hk-ck img,.hk-fv__scroll::after{animation:none}
}
/* 30万：演出を止める（plan-none） */
.plan-none .hk-open{display:none}

.hk-note{display:block;font-size:var(--hk-aux);color:var(--sub);margin-top:4px}

/* ---------- 2026-09-27 本番写真の差し替え＋演出 A〜D（どれも .hk-fx に is-in が付くと最終形） ---------- */
/* 02 缶の写真 */
.hk-card__img--tin{aspect-ratio:1}
.hk-card__img--tin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transition:transform .6s var(--ease)}
/* B｜重なった3枚が、画面に入ると横に並ぶ（PCのみ） */
@media (min-width:901px){
  html.js .hk-fx[data-fx=spread] .hk-card{transition:transform 1s var(--ease),box-shadow .35s var(--ease)}
  html.js .hk-fx[data-fx=spread]:not(.is-in) .hk-card:nth-child(1){transform:translateX(calc(100% + 32px)) rotate(-7deg)}
  html.js .hk-fx[data-fx=spread]:not(.is-in) .hk-card:nth-child(2){transform:rotate(3deg) translateY(-10px);z-index:2}
  html.js .hk-fx[data-fx=spread]:not(.is-in) .hk-card:nth-child(3){transform:translateX(calc(-100% - 32px)) rotate(6deg)}
  html.js .hk-fx[data-fx=spread] .hk-card{position:relative}
}
/* A｜14マスが、左上から1つずつ埋まる */
.hk-grid li{overflow:hidden}
html.js .hk-fx[data-fx=fill] img{clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--ease) calc(var(--i,0)*110ms)}
html.js .hk-fx[data-fx=fill] b,html.js .hk-fx[data-fx=fill] span{opacity:0;transition:opacity .5s var(--ease) calc(var(--i,0)*110ms + .3s)}
html.js .hk-fx[data-fx=fill].is-in img{clip-path:inset(0 0 0 0)}
html.js .hk-fx[data-fx=fill].is-in b,html.js .hk-fx[data-fx=fill].is-in span{opacity:1}
/* 04 工程の写真（今の工程だけ見せる） */
.hk-proc__side{display:grid;gap:20px}
.hk-proc__ph{margin:0;position:relative;aspect-ratio:3/2;border-radius:var(--hk-r);overflow:hidden;background:var(--line)}
.hk-proc__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.4s var(--ease)}
.hk-proc__ph img.is-now{opacity:1;transform:scale(1)}
.hk-proc__side .hk-proc__list{height:26svh}
/* C｜写真が、缶の角丸の窓から広がる */
html.js .hk-fx[data-fx=win]{clip-path:inset(14% 20% round 40px);transition:clip-path 1.3s var(--ease)}
html.js .hk-fx[data-fx=win] img{transform:scale(1.15);transition:transform 1.6s var(--ease)}
html.js .hk-fx[data-fx=win].is-in{clip-path:inset(0 0 round var(--hk-r))}
html.js .hk-fx[data-fx=win].is-in img{transform:scale(1)}
.hk-gift__fig{aspect-ratio:1}
.hk-gift__fig img{object-position:62% 50%}
/* 07 店の外観（全幅の帯） */
.hk-news{padding-top:var(--sec)!important}
.hk-band{margin:0 0 72px;height:min(62svh,44vw);overflow:hidden}
.hk-band img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
html.js .hk-band.hk-fx.is-in{clip-path:inset(0 0 round 0)}
/* D｜ボタンの文字が1字ずつ転がる（hover） */
.hk-roll{display:inline-flex;overflow:hidden;line-height:1.4;height:1.4em}
.hk-roll>span{display:inline-block;text-shadow:0 1.4em currentColor;transition:transform .45s var(--ease) calc(var(--i)*22ms)}
:is(.hk-btn,.hk-more):is(:hover,:focus-visible) .hk-roll>span{transform:translateY(-1.4em)}
@media (max-width:900px){
  .hk-proc__side .hk-proc__list{height:22svh}
  .hk-proc__ph{aspect-ratio:16/9}
  .hk-band{height:52svh;margin-bottom:48px}
}
@media (prefers-reduced-motion: reduce){
  .hk-fx,.hk-fx *,.hk-roll>span{transition:none!important}
}
.plan-none .hk-fx,.plan-none .hk-fx *{transition:none!important}

/* ---------- 2026-09-27 演出 追加 E〜K ---------- */
/* E｜見出しの欧文が、1字ずつ下から立ち上がる（No. の罫線も伸びる） */
.hk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hk-h__en .hk-ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hk-h__en .hk-ch>i{display:inline-block;font-style:normal}
html.js .hk-fx[data-fx=rise] .hk-ch>i{transform:translateY(105%) rotate(6deg);transition:transform .9s var(--ease) calc(var(--i,0)*28ms)}
html.js .hk-fx[data-fx=rise] .hk-h__no::after{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .15s}
html.js .hk-fx[data-fx=rise] .hk-h__ja{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease) .35s}
html.js .hk-fx[data-fx=rise].is-in .hk-ch>i{transform:none}
html.js .hk-fx[data-fx=rise].is-in .hk-h__no::after{transform:none}
html.js .hk-fx[data-fx=rise].is-in .hk-h__ja{clip-path:inset(0 0 0 0)}
/* F｜約束の本文が、読む速さで濃くなる（スクロール連動） */
[data-fill] .hk-fc{transition:color .25s linear}
html.js [data-fill] .hk-fc{color:var(--sub)}
html.js [data-fill] .hk-fc.is-on{color:var(--ink)}
/* G｜14の名前が流れる帯。スクロールの向きで流れる向きが変わる */
.hk-mq{overflow:hidden;padding:24px 0 8px;border-block:1px solid var(--ink);background:var(--bg)}
.hk-mq__row{display:flex;width:max-content;white-space:nowrap;transform:translateX(var(--mx,0px));will-change:transform}
.hk-mq__row span{flex:none}
.hk-mq__row span::before{content:attr(data-t)}  /* 飾りの帯なので文字は擬似要素に（本文の計測に混ぜない・読み上げない） */
.hk-mq__row:first-child{font-family:var(--dsp);font-size:clamp(56px,9vw,150px);line-height:1.1;letter-spacing:-.01em}
.hk-mq__row--ja{font-size:var(--hk-sm);color:var(--sub);padding:10px 0 12px;letter-spacing:.2em;border-top:1px solid var(--line);margin-top:14px}
/* H｜写真が枠の中で、少し遅れて動く */
.hk-plx{position:relative}
.hk-plx img{position:absolute;left:0;top:-9%;width:100%;height:118%!important;translate:0 var(--py,0px)}
/* I｜最後の反転面が、缶の蓋のように角丸から全幅に開く */
/* J｜缶カードの上だけ、丸いカーソル「Open」 */
.hk-cur{position:fixed;left:0;top:0;z-index:60;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--accent);color:#FBF7F0;display:grid;place-items:center;font-family:var(--en);font-size:var(--hk-aux);letter-spacing:.14em;pointer-events:none;transform:translate(var(--cx,-200px),var(--cy,-200px)) scale(0);transition:transform .35s var(--ease),visibility 0s .35s;visibility:hidden}
.hk-cur.is-on{transform:translate(var(--cx),var(--cy)) scale(1);visibility:visible;transition:transform .35s var(--ease),visibility 0s}
@media (hover:hover) and (pointer:fine){ [data-cur] .hk-card{cursor:none} }
/* K｜ボタンが指先に少し吸い寄せられる */
[data-mag]{transition:translate .4s var(--ease),background-color .35s var(--ease),color .35s var(--ease);translate:var(--mgx,0px) var(--mgy,0px)}
@media (max-width:700px){ .hk-mq{padding-top:16px} }
@media (prefers-reduced-motion: reduce){ .hk-cur{display:none} .hk-mq__row{transform:none} }
.plan-none .hk-cur{display:none}
.hk-h__en .hk-w{display:inline-block;white-space:nowrap}

/* ---------- 蓋が開く（節のつなぎ目。3か所だけ：01→02／03→04／06→07）
   前の節＝蓋：画面いっぱい以上の高さにして、浮く（1→1.02・影）→ 右上へずれて少し回り（最大6vw・4°）→ 外れる。
   次の節＝中身：蓋の下で待つ（-100svh 重ねて sticky）。直後の .hk-stk__sp が同じ高さを足すので、ページの長さは変わらない。
   JS が無いとき・動きを減らす設定では、ふつうに上から順に並ぶ ---------- */
.hk-stack{position:relative}
.hk-stk{position:relative;z-index:2;background:var(--bg);min-height:100svh;will-change:transform;
  transform:translate(var(--lx,0px),var(--ly,0px)) rotate(var(--lr,0deg)) scale(var(--ls,1));transform-origin:30% 100%;
  border-radius:var(--lrad,0px);box-shadow:0 calc(var(--la,0) * 40px) calc(var(--la,0) * 80px) rgba(43,33,24,calc(var(--la,0) * .28))}
html.js .hk-stack.is-lid>.hk-stk+*{position:sticky;top:var(--nt,0px);z-index:1;margin-top:-100svh}
html.js .hk-stack.is-lid>.hk-stk__sp{height:100svh}
.hk-fourteen{padding-top:var(--sec)!important}

/* ---------- 缶の詳細（3d） ---------- */
.hk-tin{padding-top:calc(var(--sec) * .75)}
.hk-tin__in{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.hk-tin__fig{margin:0;aspect-ratio:5/4;border-radius:var(--hk-r);overflow:hidden}
.hk-tin__fig img{object-position:50% 60%}
.pn:not(:has(a)){display:none}  /* 前後が無いとき（缶がまだ1つ）は出さない */
.hk-tin__price{white-space:nowrap;font-family:var(--en);font-size:var(--hk-mid);margin:8px 0 18px}
.hk-tin__price small{font-family:var(--ja);font-size:var(--hk-aux);color:var(--sub);margin-left:8px}
.hk-tin__grid{background:var(--face)}
.hk-spec__in{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.hk-spec__fig{margin:8px 0 0;aspect-ratio:16/9;border-radius:var(--hk-r);overflow:hidden}
.hk-spec__rows li{grid-template-columns:9em 1fr}
.hk-spec__rows b{font-weight:500}
.hk-tins__row--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
@media (max-width:900px){ .hk-tin__in,.hk-spec__in{grid-template-columns:1fr;gap:36px} .hk-tins__row--2{grid-template-columns:1fr} }
@media (min-width:901px){
  html.js .hk-tins__row--2.hk-fx[data-fx=spread]:not(.is-in) .hk-card:nth-child(1){transform:translateX(calc(50% + 16px)) rotate(-6deg)}
  html.js .hk-tins__row--2.hk-fx[data-fx=spread]:not(.is-in) .hk-card:nth-child(2){transform:translateX(calc(-50% - 16px)) rotate(4deg);z-index:2}
}
.hk-tin__price{margin-bottom:0}.hk-tin__tax{margin:2px 0 20px}

/* ============================================================
   下層の量産（2026-09-27）。型は構成表 B のまま。見出しはすべて .hk-h
   ============================================================ */
/* ページの頭（見出し＋リード）。T-04 の写真帯を続けるときは --band */
.hk-ph{padding:calc(var(--sec) * .62) 0 calc(var(--sec) * .5)}
.hk-ph .hk-h{margin-bottom:22px}
.hk-ph--band{padding-bottom:0}
.hk-ph--band .hk-band{margin:56px 0 0}
.hk-ph--2{padding-top:calc(var(--sec) * .6)}
/* T-03 写真横置き＋本文 */
.hk-two__in{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:center}
.hk-two--rev .hk-two__in>figure{order:2}
.hk-two__fig{margin:0;aspect-ratio:4/5;border-radius:var(--hk-r);overflow:hidden}
.hk-two--face,.hk-rowsec--face,.hk-steps-sec--face{background:var(--face)}
.hk-sign{margin:20px 0 0;color:var(--sub);font-size:var(--hk-aux);letter-spacing:.1em}
/* T-05 工程の番号行 */
.hk-steps{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--ink)}
.hk-steps li{display:grid;grid-template-columns:5.5em 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.hk-steps li:has(figure){grid-template-columns:5.5em 1fr minmax(0,38%)}
.hk-steps em{font-family:var(--dsp);font-style:normal;font-size:var(--hk-mid);line-height:1.1;color:var(--sub)}
.hk-steps b{display:block;font-size:var(--hk-sm);font-weight:500;margin-bottom:6px}
.hk-steps p{margin:0;color:var(--sub);max-width:var(--measure)}
.hk-steps figure{margin:0;aspect-ratio:3/2;border-radius:var(--hk-r);overflow:hidden}
.hk-steps figure img{width:100%;height:100%;object-fit:cover}
/* T-01 くらべ表 */
.hk-cmp{margin-top:40px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.hk-cmp__r{display:grid;grid-template-columns:minmax(8em,1.2fr) repeat(3,minmax(0,1fr))}
.hk-cmp__r>*{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 16px}
.hk-cmp__r>b{font-weight:500;font-size:var(--hk-sm)}
.hk-cmp__r>span[role=rowheader]{color:var(--sub);font-size:var(--hk-aux)}
/* T-01 図鑑（14マスに、置いている理由を足す） */
.hk-dex li{gap:4px}
.hk-dex em{font-family:var(--dsp);font-style:normal;font-size:var(--hk-aux);color:var(--sub)}
.hk-dex p{margin:6px 0 0;font-size:var(--hk-aux);line-height:1.7;border-top:1px solid var(--line);padding-top:8px}
@media (min-width:1100px){ .hk-dex{grid-template-columns:repeat(7,minmax(0,1fr))} }
.hk-grid--mittsu{grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px}
.hk-grid__t{min-height:130px;align-content:space-between}
.hk-grid__t em{font-family:var(--dsp);font-style:normal;color:var(--sub);font-size:var(--hk-aux)}
/* T-09 人物：代表を大きく＋2×2（2×2 は makers.json の一覧） */
.hk-t09__lead{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:center;margin-bottom:var(--sec)}
.hk-maker__num{font-family:var(--en);margin:0 0 18px}
.hk-maker__num b{font-family:var(--dsp);font-weight:400;font-size:var(--hk-en);line-height:1;margin-right:6px}
/* T-02 浮遊（ギフトの選び方） */
.hk-float2 .ct{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
/* 事例カード */
.hk-case{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center;margin-top:40px;border:1px solid var(--ink);border-radius:var(--hk-r);padding:20px;background:var(--bg)}
.hk-case__img{display:block;aspect-ratio:3/2;border-radius:10px;overflow:hidden}
.hk-case__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hk-case:hover .hk-case__img img{transform:scale(1.04)}
.hk-case__t em{display:block;font-family:var(--en);font-style:normal;font-size:var(--hk-aux);color:var(--sub);letter-spacing:.2em}
.hk-case__t b{display:block;font-size:var(--hk-mid);font-weight:500;margin:6px 0 10px}
.hk-case__t span{color:var(--sub)}
.hk-go{margin:32px 0 0}
/* 事例の数字（動かさない。カウントアップはしない） */
.hk-facts{list-style:none;margin:40px 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.hk-facts li{padding:24px 16px 0 0}
.hk-facts b{font-family:var(--dsp);font-weight:400;font-size:var(--hk-en);line-height:1}
.hk-facts span{font-size:var(--hk-sm);margin-left:6px}
.hk-facts p{margin:8px 0 0;color:var(--sub)}
/* よくある質問（雛形のアコーディオンを使う。上書きは bridge.css） */
/* お知らせ（一覧・記事） */
.hk-art .ct{max-width:820px}
.hk-art__meta{display:flex;gap:18px;font-family:var(--en);font-size:var(--hk-aux);color:var(--sub);margin:0 0 12px}
.hk-art__t{font-size:var(--hk-mid);font-weight:500;line-height:1.6;margin:0 0 32px}
.hk-art__body{border-top:1px solid var(--line);padding-top:32px;margin-bottom:40px}
/* フォーム（入力→確認→完了は同じページで切り替える） */
.hk-btn--ink{border:0;cursor:pointer;background:var(--ink);color:#FBF7F0;font:inherit}
.hk-btn--ink:hover,.hk-btn--ink:focus-visible{background:var(--accent);color:#FBF7F0}
.hk-back{border:0;background:none;cursor:pointer;font:inherit;padding:0}
.hk-back::after{content:none}
@media (max-width:900px){
  .hk-two__in,.hk-t09__lead,.hk-float2 .ct,.hk-case{grid-template-columns:1fr;gap:32px}
  .hk-two--rev .hk-two__in>figure{order:0}
  .hk-steps li,.hk-steps li:has(figure){grid-template-columns:3.5em 1fr}
  .hk-steps figure{grid-column:2}
  .hk-cmp{overflow-x:auto}
  .hk-cmp__r{min-width:560px}
  .hk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}

}
@media (max-width:700px){ .hk-dex{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hk-rowsec .hk-rows,.hk-spec__rows{max-width:960px}
.hk-nb{white-space:nowrap}
.hk-faq__g+.hk-faq__g{margin-top:96px}