/* 案A「鏡」2026-10-04: セット面の鏡に、店が映る。鏡の節＝目次 */
:root{
  --ink:#1d1a1b;
  --paper:#fff;
  --line:#e6e1e2;
  --sub:#6b6265;
  --sub2:#767676;
}
body.t-bloom{ --act:#86606b; --deep:#5e4049; --mid:#9c7681; --pale:#eadfe2; --paler:#f7f2f3; }
body.t-um{ --act:#86624f; --deep:#5c4436; --mid:#b08d7a; --pale:#eee3dc; --paler:#f8f3ef; }

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:17px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.3}

/* ヘッダー（店名だけ） */
.site-header{
  background:var(--paper);
  height:52px;
  display:flex;
  align-items:center;
  padding:0 20px;
  border-bottom:1px solid var(--line);
}
.site-header-name{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:.01em;
  color:var(--ink);
}
.site-header-name a{color:inherit;text-decoration:none}

/* ===== 鏡の節（目次）===== */
.mirrors{position:relative;height:220svh;background:var(--paper)}
.mirrors .stage{
  position:sticky;top:0;height:100svh;overflow:hidden;margin:0;background:var(--paper);
}
.mirror-col{position:absolute;inset:0}

/* 大きな鏡：アーチ形（上が半円・下は四角）の鏡。幅は約58%・左16pxから、
   高さは32svh。本来はもっと縦長にしたかったが、提案帯＋ヘッダーを差し引いた初画面の
   高さで台の文字（3行）が固定ボタンの裏に隠れないことを優先し、32svhまで縮めた
   （比率は約0.93＝ほぼ正方形。報告.md「2回目の直し」参照）。
   上端は提案帯＋ヘッダーの下、24px空ける（3枚に割れたあとの鏡と合わせる） */
.m-big{
  position:absolute;left:16px;top:24px;width:58%;height:32svh;margin:0;
  border:1px solid var(--deep);
  border-radius:999px 999px 0 0;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px #fff;
}
.m-big-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.m-big.flip .m-big-img{transform:scaleX(-1)}
/* アーチの丸い上端に注記がかからないよう、四角い下側（右下）に置く */
.m-big .hk-photo-note.tr{z-index:5;top:auto;bottom:10px;left:auto;right:10px}

/* 3枚の細い鏡（目次・アーチ形）：大きな鏡と同じ上端(24px)に重ねる。
   高さはSPECどおりstageの約52%（進み100%は固定ピンのstageがviewport全体＝659px
   使えるため、提案帯・ヘッダーの重なりを気にしなくてよい） */
.m-row{
  position:absolute;left:16px;right:0;top:24px;height:52svh;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  opacity:1;
}
.m-item{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);transform:none}
.m-glass{
  position:relative;flex:1;overflow:hidden;min-height:0;
  border:1px solid var(--deep);
  border-radius:999px 999px 0 0;
  box-shadow:inset 0 0 0 1px #fff;
}
.m-glass img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m-item.flip .m-glass img{transform:scaleX(-1)}
.m-caption{padding:8px 2px 0;text-align:center;opacity:1}
.m-label{display:block;font-family:"Hina Mincho",serif;font-weight:400;font-size:20px;color:var(--ink);line-height:1.25;word-break:keep-all}
.m-label span{display:block}
.m-arrow{display:block;margin-top:3px;font-size:15px;color:var(--deep)}
.m-current{display:block;margin-top:4px;font-size:13px;color:var(--sub)}

/* 台＝細い棚（10px）＋その下の白地に墨の店名。大きなベタの面はやめた（司令塔2回目の指摘）。
   .counter--big＝初めの鏡の下に接する棚。.counter--row＝3枚に割れたあとの棚（装飾の複製・
   aria-hidden＝視覚だけscale(.6)で小さく。内容はcounter--bigと同じ） */
.counter{position:absolute;left:0;color:var(--ink)}
.counter .shelf{height:10px;background:var(--deep);width:calc(58% + 36px)}
.counter .name-block{padding:12px 20px 0 20px}
.counter--big{top:calc(24px + 32svh)}
.counter--row{top:calc(24px + 52svh + 58px);transform:scale(.6);transform-origin:0 0}
.counter .ledge-name{font-family:"Cormorant Garamond",serif;font-weight:500;color:var(--ink);letter-spacing:.01em;margin:0;font-size:64px;line-height:1.3}
@media (max-width:1023px){ body.t-um .counter .ledge-name{font-size:56px} }
.counter .ledge-name.ledge-name--sub{font-size:20px;margin-top:8px}
.counter .ledge-jp-title{font-family:"Hina Mincho",serif;font-weight:400;color:var(--ink);margin:0;font-size:44px;line-height:1.3;word-break:keep-all}
.counter .ledge-kana{font-family:"Hina Mincho",serif;font-weight:400;color:var(--sub);margin:6px 0 0;font-size:17px;line-height:1.3;letter-spacing:.05em}
.counter .ledge-tagline{font-family:"Hiragino Sans","Noto Sans JP",sans-serif;color:var(--sub);margin:8px 0 0;font-size:15px;line-height:1.3}

/* JSが入った瞬間の既定＝進み0の見た目（JSが読み込み次第、スクロール位置に応じて上書きされる） */
html.js .mirrors .m-big{opacity:1}
html.js .mirrors .m-row{opacity:0}
html.js .mirrors .m-row .m-item:nth-child(1){transform:translateX(40px)}
html.js .mirrors .m-row .m-item:nth-child(3){transform:translateX(-40px)}
html.js .mirrors .m-row .m-caption{opacity:0}
html.js .mirrors .counter--big{opacity:1}
html.js .mirrors .counter--row{opacity:0}

/* JS無効（.jsが付かない）＝既定のまま＝終わりの状態で全部見える */
.mirrors .m-big{opacity:0}
.mirrors .counter--big{opacity:0}
.mirrors .counter--row{opacity:1}

/* 動きを止める（reduced-motion）：完成状態（3枚の鏡＋ラベル＋小さい棚）で静止 */
@media (prefers-reduced-motion:reduce){
  .mirrors .m-big{opacity:0 !important}
  .mirrors .m-row{opacity:1 !important}
  .mirrors .m-row .m-item{transform:none !important}
  .mirrors .m-row .m-caption{opacity:1 !important}
  .mirrors .counter--big{opacity:0 !important}
  .mirrors .counter--row{opacity:1 !important}
}

/* ===== 節の骨格 ===== */
.about,.access,.ask{padding:72px 16px}
.about{background:var(--paper)}
.access{background:var(--paler);border-top:1px solid var(--line)}
.ask{background:var(--paper);border-top:1px solid var(--line)}
.about h2,.access h2{
  font-family:"Hina Mincho",serif;font-weight:400;font-size:30px;margin-bottom:28px;text-align:left;
}

/* サロン紹介 */
.about-body{font-size:17px}
.about-body p{margin:0 0 14px}
.about-photo{margin:28px -16px 0 -16px;padding-right:24px}
.about-photo img{width:100%;height:auto;display:block}

/* ご予約・アクセス */
.info-table{margin:0 0 28px}
.info-table .row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;padding:16px 0;border-top:1px solid var(--line)}
.info-table .row:first-child{border-top:none}
.info-table dt{margin:0;font-size:15px;color:var(--sub);font-weight:400}
.info-table dd{margin:0;font-size:17px;font-weight:400}
.info-note{margin:-14px 0 24px;font-size:15px;color:var(--sub)}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  background:#fff;color:var(--deep);font-size:16px;font-weight:700;text-decoration:none;
  border:2px solid var(--deep);letter-spacing:.02em;border-radius:0;
}
.btn-outline:hover{background:var(--paler)}
.btn-outline:active{transform:translateY(1px)}
.btn-outline:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* 一枚の言葉 */
.ask-lead{
  font-family:"Hina Mincho",serif;font-weight:400;
  font-size:34px;letter-spacing:.02em;margin:0 0 28px;color:var(--ink);word-break:keep-all;
}
.ask-lead span{display:block}
.btn-solid{
  display:flex;align-items:center;justify-content:center;min-height:56px;width:100%;
  background:var(--act);color:#fff;font-size:16px;font-weight:700;text-decoration:none;
  border:2px solid var(--act);border-radius:0;letter-spacing:.02em;cursor:pointer;
}
.btn-solid:hover{background:var(--deep);border-color:var(--deep)}
.btn-solid:active{transform:translateY(2px)}
.btn-solid:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.ask-note{margin:14px 0 0;font-size:15px;color:var(--sub2)}

/* 鏡の列（小さい版・目次を最後にもう一度／下層の「目次に戻る」） */
.toc-repeat{padding:40px 16px 56px;border-top:1px solid var(--line);background:var(--paper)}
.toc-repeat h2{font-family:"Hina Mincho",serif;font-weight:400;font-size:20px;margin:0 0 20px;color:var(--sub)}
.toc-repeat .m-row{position:static;height:120px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;opacity:1}
.toc-repeat .m-item{transform:none !important}
.toc-repeat .m-glass{border:1px solid var(--deep);box-shadow:inset 0 0 0 1px #fff}
.toc-repeat .m-label{font-size:17px}
.toc-repeat .m-item.is-current .m-glass{border:2px solid var(--act);box-shadow:none}

/* メニューの列（menu.html） */
.menu-group{margin:0 0 32px}
.menu-cat{position:relative;padding-left:16px;margin:0 0 18px;font-family:"Hina Mincho",serif;font-weight:400;font-size:26px;color:var(--ink);word-break:keep-all}
.menu-cat::before{content:"";position:absolute;left:0;top:6px;width:1px;height:24px;background:var(--mid)}
.menu-list{margin:0;padding:0;list-style:none}
.menu-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:17px}
.menu-list li:first-child{border-top:none}
.menu-list .price{font-variant-numeric:tabular-nums;font-size:16px;color:var(--sub);white-space:nowrap}
.menu-note{margin:0 0 8px;font-size:15px;color:var(--sub)}

/* 下層ページ：最初の画面（アーチの鏡1枚＋下に細い棚＋店名）。
   高さはmirror(24px+32svh)+棚+ページ見出し2行+余白24pxを足した実測値 */
.page-mirror{position:relative;height:calc(185px + 32svh);background:var(--paper)}
.page-mirror .m-big{position:absolute;left:16px;top:24px;width:58%;height:32svh;margin:0}
.page-mirror .pm-img{opacity:1;transform:scale(1)}
html.js .page-mirror .pm-img{opacity:0;transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .page-mirror .pm-img{opacity:1 !important;transform:scale(1) !important}
}
.page-mirror .counter{position:absolute;left:0;top:calc(24px + 32svh);transform:none}

/* フッター */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:28px 20px calc(28px + 16px)}
.site-footer .ft-note{font-size:13px;line-height:1.7;color:#48484c}
.site-footer .ft-note p{margin:0 0 8px}
.site-footer .ft-note b{color:#1a1a1a;font-weight:700}
.site-footer .credit{margin:10px 0 0;font-size:12.5px;color:#767676}

/* ===== PC（≥1024）：左にアーチの鏡、右に店名（同じ考えを横並びで） ===== */
@media (min-width:1024px){
  .mirrors .stage{display:flex;align-items:center;justify-content:center;gap:0;background:var(--paper)}
  .mirror-col{position:relative;inset:auto;flex:0 0 58%;height:78vh;align-self:center}
  .m-big{top:0;left:0;width:72%;height:100%}
  .m-row{top:0;height:100%}

  /* 右側の店名の列。鏡が割れても位置を変えず常に表示（PCは横の余白が十分あるため、
     モバイルのような棚の縮小スライドは不要）。counter--rowは重複表示を避けて隠す */
  .counter--row{display:none}
  .counter--big{
    position:relative;inset:auto;top:auto;left:auto;transform:none !important;
    flex:0 0 42%;align-self:center;opacity:1 !important;padding-left:56px;
  }
  .counter--big .shelf{width:64px}
  .counter .ledge-name{font-size:96px}
  .counter .ledge-jp-title{font-size:72px}
  .counter .ledge-kana{font-size:20px;margin-top:14px}
  .counter .ledge-tagline{font-size:17px;margin-top:10px}

  .about,.access,.ask,.toc-repeat{padding:96px 64px}
  .about .wrap,.access .wrap,.ask .wrap{
    max-width:1100px;margin:0 auto;display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 48px;
  }
  .about h2,.access h2{margin-bottom:0}
  .about-photo{margin:0;padding-right:0}
  .ask-lead{font-size:48px}
  .toc-repeat{max-width:1100px;margin:0 auto}
  .toc-repeat .m-row{height:220px}

  .page-mirror{height:60vh}
  .page-mirror .m-big{width:40%;height:100%;top:0}
  .page-mirror .counter{position:absolute;left:calc(40% + 56px);top:50%;transform:translateY(-50%)}
  .page-mirror .counter .shelf{display:none}
}
@media (max-width:1023px){ .about .wrap,.access .wrap,.ask .wrap{display:block} }

/* 見比べ用の切り替えバー（デモだけ） */
.hk-switch{position:fixed;top:0;left:0;right:0;z-index:9600;height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#111;color:#fff;font:600 13px/1 "Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:0}
.hk-switch span{color:#aaa;margin-right:2px;white-space:nowrap;font-weight:400}
.hk-switch a{flex:1;text-align:center;color:#fff;text-decoration:none;padding:8px 0;border:1px solid #666;white-space:nowrap}
.hk-switch a.on{background:#fff;color:#111;border-color:#fff}
.hk-switch a.kind{flex:0 0 auto;padding:8px 8px;border-color:#444;color:#ddd}
body{padding-top:40px}
html.js .stage{top:40px !important;height:calc(100svh - 40px) !important}
@media (prefers-reduced-motion:reduce){ html.js .stage{position:static !important;height:auto !important} }