/* 見本集（紹介データの商店街）… nextray.jp の中の works/ のページだけで使う。
   頭・足・ボタン・見出しは nextray.jp の p.css・ui.css のまま。ここは 3D の舞台と店の一覧だけ */

.gl-dake { display: none; }
.gl .gl-dake { display: inline; }
.gl .gl-nashi { display: none; }
.ku { display: inline-block; }

/* ───── 商店街（3D の舞台） ───── */
.machi {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(to bottom, #1d1a40 0%, #3a3064 30%, #7b4b69 55%, #c46b55 68%, #2c2533 68.4%, #231f28 100%);
}
.gl .machi {
  height: max(460px, calc(100svh - var(--head) - 40px));
  max-height: 860px;
  touch-action: pan-y;
}
.machi canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .9s ease;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}
.machi.ready canvas { opacity: 1; }
.machi canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--amber); border-radius: 0; }

.machi-moji {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 5vw, 48px) 0 clamp(64px, 10vw, 110px);
  text-shadow: 0 1px 14px rgba(6, 12, 24, .8), 0 0 2px rgba(6, 12, 24, .6);
}
.gl .machi-moji {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: clamp(18px, 3vw, 36px) 0 0;
  pointer-events: none;
}
.gl .machi-moji a { pointer-events: auto; }
.machi .ui-crumbs { margin-bottom: 10px; color: rgba(255, 255, 255, .78); }
.machi .ui-crumbs a { color: rgba(255, 255, 255, .78); }
.machi-ue {
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .04em;
  color: #ffd9a3;
}
.machi h1 {
  margin-top: 4px;
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.machi-setsumei {
  margin-top: 10px;
  max-width: 34em;
  font-weight: 600;
  font-size: clamp(.92rem, 1.3vw, 1.02rem);
  line-height: 1.85;
}

.machi-tebiki {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  background: rgba(6, 12, 24, .62);
  white-space: nowrap;
  pointer-events: none;
}
.machi-ji {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  font-weight: 800;
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  text-align: center;
  text-shadow: 0 1px 12px rgba(6, 12, 24, .95);
  pointer-events: none;
}
.machi-ji:empty { display: none; }
.machi.yoru-mae .machi-tebiki { visibility: hidden; }
.gl .machi-moji { transition: opacity .4s ease; }
.machi.yoru-mae .machi-moji { opacity: 0; }
.machi.yoru::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #060c18;
  opacity: 0;
  animation: kurakunaru .45s ease-in forwards;
  pointer-events: none;
}
@keyframes kurakunaru { to { opacity: .85; } }

/* PC で見ている人がスマホで読み取る QR（スマホの幅では出さない）。通りの手前の左下に白い札で置く。
   触っても 3D の邪魔をしない（pointer-events: none） */
.machi-qr {
  position: absolute;
  z-index: 2;
  left: max(16px, calc((100% - min(1352px, calc(100% - 88px))) / 2));
  bottom: clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 14px;
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  border-top: 4px solid var(--amber);
  box-shadow: 0 10px 34px rgba(6, 12, 24, .45);
  pointer-events: none;
  transition: opacity .4s ease;
}
.machi-qr img { display: block; flex: none; width: 180px; height: 180px; }
.machi-qr-moji { width: 200px; }
.machi-qr-midashi { font-weight: 800; font-size: 1.1rem; line-height: 1.4; white-space: nowrap; }
.machi-qr-setsumei { margin-top: 6px; font-size: .8rem; line-height: 1.7; color: var(--ink-2); }
.machi.yoru-mae .machi-qr { opacity: 0; }
@media screen and (max-width: 767.98px) { .machi-qr { display: none; } }
@media screen and (max-width: 1179.98px) {
  .machi-qr { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .machi-qr img { width: 150px; height: 150px; }
  .machi-qr-moji { width: 150px; }
  .machi-qr-midashi { font-size: 1rem; }
  .machi-qr-setsumei { margin-top: 2px; font-size: .74rem; }
}
@media screen and (max-height: 700px) { .machi-qr img { width: 120px; height: 120px; } .machi-qr-moji { width: 150px; } }

/* ───── 相談の帯 ───── */
.wk-soudan { background: var(--band-dark); color: #fff; padding: 22px 0; }
.wk-soudan .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.wk-soudan p { font-weight: 700; font-size: clamp(.98rem, 1.6vw, 1.15rem); line-height: 1.6; }

/* ───── 一覧 ───── */
.wk-sec { padding: clamp(48px, 7vw, 88px) 0; }
.wk-sec + .wk-sec { padding-top: 0; }
.choume { margin-top: clamp(32px, 4vw, 48px); }
.choume-na {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.4;
}
.choume-ban { font-size: .8em; font-weight: 800; color: var(--amber-ink); }
.mise { list-style: none; margin: 0; padding: 0; }
.mise-gyou, .jisha-gyou {
  position: relative;
  display: grid;
  grid-template-columns: clamp(170px, 22vw, 260px) minmax(0, 1fr) auto;
  grid-template-areas: "e naka hiraku";
  align-items: center;
  column-gap: clamp(14px, 2.4vw, 28px);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.mise-gyou:hover { background: #f7fafd; }
.mise-e {
  grid-area: e;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #1b2433;
  border-radius: 8px;
  border-top: 6px solid var(--iro, var(--ink));
}
.mise-naka { grid-area: naka; min-width: 0; }
.mise-shu { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.mise-na { font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; margin: 2px 0 6px; }
.mise-shikake { font-size: .92rem; font-weight: 600; padding-left: 12px; border-left: 4px solid var(--iro, var(--ink)); line-height: 1.5; color: var(--ink-2); }
.mise-hiraku {
  grid-area: hiraku;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--btn);
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 6px 18px rgba(18, 114, 196, .24);
}
.mise-hiraku::after { content: ""; position: absolute; inset: 0; }
.mise-gyou:hover .mise-hiraku, .jisha-gyou:hover .mise-hiraku { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(18, 114, 196, .32); }
.mise-hiraku:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }

/* ───── 当社の実験室（店の見本とは別。夜の地にブランドの3色の線） ───── */
.jisha-gyou {
  margin-top: 20px;
  padding: clamp(14px, 2vw, 22px);
  background: #070a14;
  color: #e9eef9;
  border-top: 4px solid transparent;
  border-bottom: 0;
  border-image: var(--grad) 1;
}
.jisha-gyou:hover { background: #0d1222; }
.jisha-gyou .mise-e { border-top: 0; border: 1px solid #2b3550; }
.jisha-gyou .mise-shu { color: #a9b4c9; }
.jisha-gyou .mise-shikake { color: #d6deee; border-left-color: #12d4d0; }
.jisha-gyou .mise-hiraku { background: var(--grad); color: #04060d; box-shadow: none; }

.wk-kakuu { margin-top: 24px; font-size: .84rem; color: var(--muted); }
.wk-kakuu a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* スマホ */
@media (max-width: 639.98px) {
  .gl .machi { height: max(470px, 74svh); }
  .machi-tebiki { bottom: 22px; font-size: .78rem; }
  .machi-ji { bottom: 62px; }
  .wk-soudan .btn { width: 100%; }
  .mise-gyou, .jisha-gyou {
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    grid-template-areas: "e naka" "hiraku hiraku";
    row-gap: 12px;
    column-gap: 14px;
  }
  .mise-na { font-size: 1.12rem; }
  .mise-shikake { font-size: .88rem; }
  .mise-hiraku { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .machi canvas { transition-duration: .3s; } }

/* ───── 夜の通り（最初の画面の商店街の続きとして、ページの下まで夜の通りで通す。2026-10-20 第2版）
   色は 3D の商店街から取る … 石畳 #3a3438、空の上 #121436、提灯 #ff6a4a・#fff0d0、窓の灯り #ffc27a（夕日）。
   上（手前）から下（奥）へ、地は空の藍へ深まり、提灯は小さく控えめになる。
   字の色は夜の地で 4.5:1 以上（測った値は横に書く）。動きは触れたときだけ ───── */
main {
  --yo-michi: #2a2530;   /* 通り（石畳を暗くした色） */
  --yo-sora: #121436;    /* 空の上 */
  --yo-shiro: #fff0d0;   /* 白い提灯 */
  --yo-akari: #ffc27a;   /* 窓の灯り */
  --yo-moji: #f3eef7;    /* 本文 … 地のどこでも 13:1 以上 */
  --yo-usu: #c9c1d4;     /* 添え書き … 地のどこでも 8.5:1 以上 */
  --chochin-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='276' height='70'%3E%3Cdefs%3E%3CradialGradient id='ar' cx='.42' cy='.38' r='.7'%3E%3Cstop offset='0' stop-color='%23ffb49a'/%3E%3Cstop offset='.55' stop-color='%23ff6a4a'/%3E%3Cstop offset='1' stop-color='%23d9452c'/%3E%3C/radialGradient%3E%3CradialGradient id='arg'%3E%3Cstop offset='0' stop-color='%23ff6a4a' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%23ff6a4a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='aw' cx='.42' cy='.38' r='.7'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23fff0d0'/%3E%3Cstop offset='1' stop-color='%23ecd3a2'/%3E%3C/radialGradient%3E%3CradialGradient id='awg'%3E%3Cstop offset='0' stop-color='%23fff0d0' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%23fff0d0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 8Q138.0 34 276 8' fill='none' stroke='%237a6672' stroke-width='1'/%3E%3Cpath d='M34 13.6V18.1' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='34' cy='27.4' r='24.0' fill='url(%23arg)'/%3E%3Cellipse cx='34' cy='27.4' rx='7.5' ry='9.8' fill='url(%23ar)'/%3E%3Cpath d='M28.0 22.5H40.0' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M27.1 27.4H40.9' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M28.0 32.2H40.0' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M29.7 17.6h8.6M29.7 37.1h8.6' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M98 19.9V27.4' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='98' cy='35.4' r='20.8' fill='url(%23awg)'/%3E%3Cellipse cx='98' cy='35.4' rx='6.5' ry='8.5' fill='url(%23aw)'/%3E%3Cpath d='M92.8 31.1H103.2' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M92.0 35.4H104.0' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M92.8 39.6H103.2' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M94.3 26.9h7.5M94.3 43.8h7.5' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M151 20.9V24.4' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='151' cy='31.7' r='19.2' fill='url(%23arg)'/%3E%3Cellipse cx='151' cy='31.7' rx='6' ry='7.8' fill='url(%23ar)'/%3E%3Cpath d='M146.2 27.8H155.8' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M145.5 31.7H156.5' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M146.2 35.6H155.8' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M147.6 23.9h6.9M147.6 39.5h6.9' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M214 17.1V22.6' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='214' cy='31.2' r='22.4' fill='url(%23awg)'/%3E%3Cellipse cx='214' cy='31.2' rx='7' ry='9.1' fill='url(%23aw)'/%3E%3Cpath d='M208.4 26.6H219.6' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M207.6 31.2H220.4' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M208.4 35.7H219.6' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M210.0 22.1h8.0M210.0 40.3h8.0' stroke='%232b1d1f' stroke-width='2.4'/%3E%3C/svg%3E");
  --chochin-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='60'%3E%3Cdefs%3E%3CradialGradient id='br' cx='.42' cy='.38' r='.7'%3E%3Cstop offset='0' stop-color='%23ffb49a'/%3E%3Cstop offset='.55' stop-color='%23ff6a4a'/%3E%3Cstop offset='1' stop-color='%23d9452c'/%3E%3C/radialGradient%3E%3CradialGradient id='brg'%3E%3Cstop offset='0' stop-color='%23ff6a4a' stop-opacity='0.45'/%3E%3Cstop offset='1' stop-color='%23ff6a4a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='bw' cx='.42' cy='.38' r='.7'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23fff0d0'/%3E%3Cstop offset='1' stop-color='%23ecd3a2'/%3E%3C/radialGradient%3E%3CradialGradient id='bwg'%3E%3Cstop offset='0' stop-color='%23fff0d0' stop-opacity='0.45'/%3E%3Cstop offset='1' stop-color='%23fff0d0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 8Q116.0 30 232 8' fill='none' stroke='%237a6672' stroke-width='1'/%3E%3Cpath d='M30 13.0V18.5' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='30' cy='26.0' r='19.8' fill='url(%23bwg)'/%3E%3Cellipse cx='30' cy='26.0' rx='6.2' ry='8.1' fill='url(%23bw)'/%3E%3Cpath d='M25.1 22.0H34.9' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M24.3 26.0H35.7' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M25.1 30.0H34.9' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M26.4 18.0h7.1M26.4 34.1h7.1' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M86 18.3V21.8' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='86' cy='29.8' r='21.1' fill='url(%23brg)'/%3E%3Cellipse cx='86' cy='29.8' rx='6.6' ry='8.6' fill='url(%23br)'/%3E%3Cpath d='M80.7 25.6H91.3' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M79.9 29.8H92.1' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M80.7 34.1H91.3' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M82.2 21.3h7.6M82.2 38.4h7.6' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M148 18.2V24.7' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='148' cy='31.4' r='17.9' fill='url(%23bwg)'/%3E%3Cellipse cx='148' cy='31.4' rx='5.6' ry='7.3' fill='url(%23bw)'/%3E%3Cpath d='M143.5 27.8H152.5' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M142.8 31.4H153.2' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M143.5 35.1H152.5' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M144.8 24.2h6.4M144.8 38.7h6.4' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M196 13.8V18.3' stroke='%237a6672' stroke-width='1'/%3E%3Ccircle cx='196' cy='25.6' r='19.2' fill='url(%23brg)'/%3E%3Cellipse cx='196' cy='25.6' rx='6' ry='7.8' fill='url(%23br)'/%3E%3Cpath d='M191.2 21.7H200.8' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M190.5 25.6H201.5' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M191.2 29.5H200.8' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M192.6 17.8h6.9M192.6 33.4h6.9' stroke='%232b1d1f' stroke-width='2.4'/%3E%3C/svg%3E");
  --chochin-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188' height='50'%3E%3Cdefs%3E%3CradialGradient id='cr' cx='.42' cy='.38' r='.7'%3E%3Cstop offset='0' stop-color='%23ffb49a'/%3E%3Cstop offset='.55' stop-color='%23ff6a4a'/%3E%3Cstop offset='1' stop-color='%23d9452c'/%3E%3C/radialGradient%3E%3CradialGradient id='crg'%3E%3Cstop offset='0' stop-color='%23ff6a4a' stop-opacity='0.38'/%3E%3Cstop offset='1' stop-color='%23ff6a4a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='cw' cx='.42' cy='.38' r='.7'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23fff0d0'/%3E%3Cstop offset='1' stop-color='%23ecd3a2'/%3E%3C/radialGradient%3E%3CradialGradient id='cwg'%3E%3Cstop offset='0' stop-color='%23fff0d0' stop-opacity='0.38'/%3E%3Cstop offset='1' stop-color='%23fff0d0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 8Q94.0 26 188 8' fill='none' stroke='%235d5470' stroke-width='1'/%3E%3Cpath d='M26 12.3V15.8' stroke='%235d5470' stroke-width='1'/%3E%3Ccircle cx='26' cy='21.8' r='16.0' fill='url(%23crg)'/%3E%3Cellipse cx='26' cy='21.8' rx='5' ry='6.5' fill='url(%23cr)'/%3E%3Cpath d='M22.0 18.5H30.0' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M21.4 21.8H30.6' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M22.0 25.0H30.0' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M23.1 15.3h5.8M23.1 28.3h5.8' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M72 16.5V22.0' stroke='%235d5470' stroke-width='1'/%3E%3Ccircle cx='72' cy='27.5' r='14.7' fill='url(%23cwg)'/%3E%3Cellipse cx='72' cy='27.5' rx='4.6' ry='6.0' fill='url(%23cw)'/%3E%3Cpath d='M68.3 24.5H75.7' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M67.8 27.5H76.2' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M68.3 30.5H75.7' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M69.4 21.5h5.3M69.4 33.5h5.3' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M122 16.2V20.7' stroke='%235d5470' stroke-width='1'/%3E%3Ccircle cx='122' cy='26.4' r='15.4' fill='url(%23crg)'/%3E%3Cellipse cx='122' cy='26.4' rx='4.8' ry='6.2' fill='url(%23cr)'/%3E%3Cpath d='M118.2 23.3H125.8' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M117.6 26.4H126.4' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M118.2 29.6H125.8' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M119.2 20.2h5.5M119.2 32.7h5.5' stroke='%232b1d1f' stroke-width='2.4'/%3E%3Cpath d='M162 12.3V15.8' stroke='%235d5470' stroke-width='1'/%3E%3Ccircle cx='162' cy='21.0' r='14.1' fill='url(%23cwg)'/%3E%3Cellipse cx='162' cy='21.0' rx='4.4' ry='5.7' fill='url(%23cw)'/%3E%3Cpath d='M158.5 18.2H165.5' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M158.0 21.0H166.0' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M158.5 23.9H165.5' stroke='%23000' stroke-opacity='.13' stroke-width='.8'/%3E%3Cpath d='M159.5 15.3h5.1M159.5 26.7h5.1' stroke='%232b1d1f' stroke-width='2.4'/%3E%3C/svg%3E");
  background: linear-gradient(180deg, var(--yo-michi) 0%, #241f2d 32%, #1c1a2e 68%, #16152f 100%);
  color: var(--yo-moji);
}

/* 通りに渡した提灯（欄の区切り）。手前・中ほど・奥で、大きさと間合いを変える */
.wk-soudan, .ichiran, main .contact { position: relative; }
.wk-soudan::before, .ichiran::before, main .contact::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0; right: 0; top: 0;
  pointer-events: none;
  background-repeat: repeat-x;
}
.wk-soudan::before { height: 70px; background-image: var(--chochin-a); background-size: 276px 70px; background-position: -20px 0; }
.ichiran::before { height: 60px; background-image: var(--chochin-b); background-size: 232px 60px; background-position: -64px 0; }
main .contact::before { height: 50px; background-image: var(--chochin-c); background-size: 188px 50px; background-position: -40px 0; opacity: .9; }

/* 最初の画面のすぐ下 … 軒先。石畳に灯りが落ちる */
.wk-soudan {
  padding: 80px 0 34px;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255, 194, 122, .07), transparent 70%),
    linear-gradient(180deg, #221d27 0%, var(--yo-michi) 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 240, 208, .06);
}
.wk-soudan p { letter-spacing: .02em; }
.wk-soudan .btn-main, main .contact .btn-main { box-shadow: 0 10px 26px -10px rgba(4, 3, 10, .8), inset 0 1px 0 rgba(255, 255, 255, .14); }

/* 見出し */
.wk-sec .ttl, .wk-sec .ttl-jp { color: #fff; }
.wk-sec .ttl-jp { letter-spacing: .02em; }
.wk-sec .lead { color: var(--yo-usu); line-height: 1.95; margin-top: 14px; }
.wk-sec.jisha { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(56px, 7vw, 96px); }
.wk-sec.ichiran { padding-top: clamp(96px, 10vw, 136px); }

/* 丁目 … 琥珀の番と、灯りの線 */
.choume { margin-top: clamp(44px, 5vw, 64px); }
.choume-na {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(255, 194, 122, .55), rgba(255, 240, 208, .12) 40%, rgba(255, 240, 208, 0)) left bottom / 100% 1px no-repeat;
  color: #fff;
  letter-spacing: .03em;
}
.choume-ban { color: var(--amber); letter-spacing: .06em; }   /* #f6a94a … 地のどこでも 7.5:1 以上 */

/* 店 … 軒の板にのれんの色、のれん、灯りのともる窓、灯りの札（開く） */
.mise {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: 22px;
}
/* 3軒の丁目は3つ並び、2軒は2つ並び、1軒は横長の店先にして、どの丁目も幅いっぱいにそろえる */
.mise-gyou { grid-column: span 2; }
.mise-gyou:first-child:nth-last-child(2), .mise-gyou:first-child:nth-last-child(2) ~ .mise-gyou { grid-column: span 3; }
.mise-gyou {
  --noren: var(--iro);
  --noren: color-mix(in srgb, var(--iro) 78%, #fff0d0);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 22px;
  border: 0;
  border-radius: 4px 4px 10px 10px;
  background: linear-gradient(180deg, #3a333f 0%, #2e2934 100%);   /* 白い字で 11:1 以上（触れたときも） */
  box-shadow: inset 0 1px 0 rgba(255, 240, 208, .06), 0 22px 40px -22px rgba(4, 3, 10, .85);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease, background .4s ease;
}
/* 軒の板 */
.mise-gyou::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  height: 7px;
  border-radius: 4px 4px 0 0;
  background: var(--noren);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .28);
  pointer-events: none;
}
/* 水引のれん（短く横に長いのれん。窓の上に掛ける） … 触れると風が通る */
.mise-gyou::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7px; left: 18px; right: 18px;
  height: 22px;
  border-radius: 0 0 2px 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 3px),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .22) 100%),
    var(--noren);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(16.6667% - 1.5px), transparent calc(16.6667% - 1.5px) 16.6667%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(16.6667% - 1.5px), transparent calc(16.6667% - 1.5px) 16.6667%);
  transform-origin: 50% 0;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.mise-gyou:hover { background: linear-gradient(180deg, #403946 0%, #322c39 100%); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 240, 208, .08), 0 28px 48px -22px rgba(4, 3, 10, .9); }
.mise-gyou:hover::after { transform: skewX(-6deg); }
.mise-e {
  width: calc(100% - 36px);
  margin: 25px 18px 0;
  aspect-ratio: 16 / 10;
  border-top: 0;
  border-radius: 3px;
  background: #1b1824;
  box-shadow: 0 0 0 1px rgba(255, 240, 208, .16), 0 0 0 6px #221d27, 0 14px 40px -8px rgba(255, 194, 122, .28);
  transition: box-shadow .5s ease;
}
.mise-gyou:hover .mise-e { box-shadow: 0 0 0 1px rgba(255, 240, 208, .3), 0 0 0 6px #221d27, 0 18px 52px -6px rgba(255, 194, 122, .45); }
.mise-naka { flex: 1; padding: 20px 24px 0; }
.mise-shu { color: var(--yo-usu); letter-spacing: .04em; }    /* #3a333f の上で 7.0:1、触れたとき 6.4:1 */
.mise-na { color: #fff; font-size: clamp(1.15rem, 1.6vw, 1.32rem); letter-spacing: .02em; margin: 4px 0 10px; }
.mise-shikake { color: #e8e2ee; border-left-color: var(--noren); line-height: 1.6; }
.mise-hiraku {
  align-self: flex-start;
  margin: 20px 24px 0;
  min-width: 112px;
  min-height: 44px;
  padding: 0 26px;
  background: linear-gradient(180deg, #fff7e6 0%, #f4dcae 100%);
  color: #2a1d14;    /* #f4dcae の上で 12.2:1 */
  letter-spacing: .14em;
  box-shadow: 0 0 0 1px rgba(255, 240, 208, .5), 0 8px 22px -8px rgba(255, 194, 122, .55);
  transition: box-shadow .4s ease, transform .4s ease;
}
.mise-gyou:hover .mise-hiraku { transform: none; box-shadow: 0 0 0 1px rgba(255, 240, 208, .7), 0 10px 30px -6px rgba(255, 194, 122, .8); }
.mise-hiraku:focus-visible { outline: 3px solid var(--yo-akari); outline-offset: 3px; }

.mise-gyou:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  grid-template-areas: "e ." "e naka" "e hiraku" "e .";
  grid-template-rows: 1fr auto auto 1fr;
  align-items: start;
  padding: 0 0 25px;
}
.mise-gyou:only-child .mise-e { grid-area: e; }
.mise-gyou:only-child .mise-naka { grid-area: naka; padding: 25px 32px 0 22px; }
.mise-gyou:only-child .mise-hiraku { grid-area: hiraku; justify-self: start; margin: 20px 32px 0 22px; }
.mise-gyou:only-child::after { left: 18px; right: calc(62% + 18px); }

/* 当社の実験室 … 通りの中の、ブランドの光の1軒 */
.jisha-gyou {
  margin-top: 26px;
  border-radius: 4px 4px 10px 10px;
  background: #0c0f1d;
  box-shadow: 0 22px 40px -22px rgba(4, 3, 10, .9);
}
.jisha-gyou:hover { background: #10142a; }
.jisha-gyou .mise-e { width: 100%; margin: 0; box-shadow: 0 0 0 1px #2b3550, 0 14px 40px -10px rgba(30, 155, 255, .3); }
.jisha-gyou .mise-naka { padding: 0; }
.jisha-gyou .mise-hiraku { align-self: center; margin: 0; background: var(--grad); color: #04060d; box-shadow: 0 8px 24px -8px rgba(18, 212, 208, .45); }

.wk-kakuu { margin-top: 36px; color: var(--yo-usu); line-height: 1.9; }
.wk-kakuu a { color: var(--yo-shiro); }

/* 相談 … 通りの先の、夜空 */
main .contact {
  padding-top: clamp(110px, 12vw, 150px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='18' cy='26' r='.9' opacity='.7'/%3E%3Ccircle cx='96' cy='12' r='.6' opacity='.45'/%3E%3Ccircle cx='170' cy='58' r='1' opacity='.6'/%3E%3Ccircle cx='232' cy='20' r='.6' opacity='.4'/%3E%3Ccircle cx='60' cy='112' r='.7' opacity='.45'/%3E%3Ccircle cx='214' cy='128' r='.8' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 260px 180px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='397' height='283'%3E%3Cg fill='%23fff0d0'%3E%3Ccircle cx='140' cy='40' r='.7' opacity='.5'/%3E%3Ccircle cx='330' cy='96' r='1.1' opacity='.55'/%3E%3Ccircle cx='52' cy='210' r='.6' opacity='.4'/%3E%3Ccircle cx='250' cy='250' r='.8' opacity='.45'/%3E%3Ccircle cx='372' cy='190' r='.5' opacity='.35'/%3E%3C/g%3E%3C/svg%3E") repeat 120px 60px / 397px 283px, linear-gradient(180deg, #16152f 0%, var(--yo-sora) 100%);
}
main .contact .pill { background: transparent; color: var(--yo-shiro); box-shadow: inset 0 0 0 1px rgba(255, 240, 208, .55); }
main .contact .btn-line { background: transparent; color: var(--yo-shiro); border-color: rgba(255, 240, 208, .55); }
main .contact .btn-line:hover { background: rgba(255, 240, 208, .08); }

/* 足 … このページだけ、夜空の続きの色にする（ほかのページの足は白のまま） */
.ft { background: #0e1030; color: #ece8f4; border-top: 1px solid rgba(255, 240, 208, .08); }
.ft nav a, .ft-tel, .ft-area { color: #ece8f4; }
.ft nav a:hover, .ft-links a:hover { color: var(--yo-akari); }
.ft address, .ft h5, .ft-links, .copy { color: #aaa6c6; }   /* #0e1030 の上で 7.9:1 */
.ft address a, .ft-tel a { color: #fff; }
.ft-bottom { border-top-color: rgba(255, 255, 255, .1); }
.sns a { border-color: rgba(255, 255, 255, .22); color: #ece8f4; }
.ui-top { background: rgba(36, 31, 45, .92); color: #fff0d0; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 240, 208, .14); }
.ui-top .bg { stroke: rgba(255, 240, 208, .14); }
.mbar { background: rgba(18, 20, 54, .95); border-top-color: rgba(255, 240, 208, .1); }
.mbar .btn-line { background: transparent; color: #fff0d0; border-color: rgba(255, 240, 208, .5); }

/* 狭い画面 */
@media (max-width: 1099.98px) {
  .mise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mise-gyou, .mise-gyou:first-child:nth-last-child(2), .mise-gyou:first-child:nth-last-child(2) ~ .mise-gyou { grid-column: span 1; }
  .mise-gyou:only-child { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .mise { grid-template-columns: 1fr; gap: 18px; }
  .mise-gyou:only-child { display: flex; padding: 0 0 22px; }
  .mise-gyou:only-child .mise-naka { padding: 16px 18px 0; }
  .mise-gyou:only-child .mise-hiraku { margin: 16px 18px 0; }
  .mise-gyou:only-child::after { left: 14px; right: 14px; }
  .mise-gyou:only-child .mise-hiraku { justify-self: auto; }
  .mise-e { width: calc(100% - 28px); margin: 23px 14px 0; }
  .mise-naka { padding: 16px 18px 0; }
  .mise-hiraku { align-self: stretch; width: auto; margin: 16px 18px 0; min-height: 48px; }
  .mise-gyou::after { left: 14px; right: 14px; height: 20px; }
  .jisha-gyou { grid-template-columns: 1fr; grid-template-areas: "e" "naka" "hiraku"; row-gap: 16px; }
  .jisha-gyou .mise-hiraku { align-self: stretch; }
  .wk-soudan { padding-top: 70px; }
  .wk-soudan::before { height: 58px; background-size: 230px 58px; }
}

/* ───── お客様の実績（2026-10-20）。見本（架空の店）とは欄・札・色を分ける。
   見本の店は夜の暗い板、実績は明るい紙の板＋琥珀の札「実績」。見本の見出しには枠だけの札「架空の店」 ───── */
.wk-fuda { display: inline-block; vertical-align: .25em; margin-left: 12px; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; white-space: nowrap; }
.wk-fuda.jitsu { background: var(--yo-akari); color: #1e1408; }                                   /* 12:1 */
.wk-fuda.kakuu { background: transparent; color: var(--yo-shiro); box-shadow: inset 0 0 0 1.5px rgba(255, 240, 208, .7); }
.wk-sec.jisseki { padding-top: clamp(64px, 8vw, 104px); padding-bottom: 0; }
.jisseki-gyou {
  position: relative;
  display: grid;
  grid-template-columns: clamp(200px, 30vw, 360px) minmax(0, 1fr) auto;
  grid-template-areas: "e naka hiraku";
  align-items: center;
  column-gap: clamp(16px, 2.6vw, 32px);
  margin-top: 26px;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 6px 6px 12px 12px;
  background: #f7f1e3;
  color: #1e1a24;
  border-top: 5px solid var(--yo-akari);
  box-shadow: 0 0 0 1px rgba(255, 240, 208, .35), 0 26px 52px -22px rgba(255, 194, 122, .35);
}
.jisseki-gyou .mise-e { width: 100%; margin: 0; border: 1px solid #d9cfb8; border-top: 0; }
.jisseki-gyou .mise-naka { padding: 0; }
.jisseki-gyou .mise-shu { color: #5a5048; }                                                    /* 7.0:1 */
.jisseki-gyou .mise-na { color: #1e1a24; margin: 4px 0 8px; }
.jisseki-setsumei { font-size: .92rem; line-height: 1.85; color: #34303a; }
.jisseki-url { margin-top: 8px; font-size: .84rem; font-weight: 700; color: #6b4a12; letter-spacing: .02em; }   /* 6.9:1 */
.jisseki-gyou .mise-hiraku { align-self: center; margin: 0; background: #1e1a24; color: #fff0d0; box-shadow: none; }
.jisseki-gyou:hover .mise-hiraku { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(30, 26, 36, .6); }
.jisseki .wk-kakuu { margin-top: 22px; }
@media (max-width: 860px) {
  .jisseki-gyou { grid-template-columns: 1fr; grid-template-areas: "e" "naka" "hiraku"; row-gap: 16px; }
  .jisseki-gyou .mise-hiraku { align-self: stretch; width: auto; }
}
@media (max-width: 639.98px) { .wk-fuda { margin-left: 8px; font-size: .72rem; } }