/* La Quesera Hair&Beauty — 22件目
   顔: 生成り#F4F0E7 × 夜の帳#1E242B × 刃の蒼#3C4B57 × 古樽の焦茶#2A2019
   フォント: Cinzel(欧文) + Yuji Syuku(和文見出し) + Noto Sans JP(本文)
   新モーション: R28「刃のひとなで」(Blade-Stroke Reveal) */

:root{
  --paper:#F4F0E7;
  --paper2:#ECE4D3;
  --card:#FCF9F2;
  --ink:#2A2019;
  --ink-soft:#5A4C40;
  --night:#1E242B;
  --cream:#EDE7DA;
  --blade:#3C4B57;
  --blade-deep:#2C3944;
  --wood:#6E4A28;
  --line:#D8CFBC;
  --serif-en:"Cinzel",serif;
  --serif-ja:"Yuji Syuku",serif;
  --sans:"Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-blade:cubic-bezier(.65,0,.35,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.9;
  font-size:15.5px;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blade);text-decoration:none}
main{outline:none}
[id]{scroll-margin-top:84px}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--night);color:var(--cream);padding:.6em 1.2em;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* ============ header ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.1rem;
  background:rgba(244,240,231,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.brand{display:flex;flex-direction:column;line-height:1.25}
.brand .en{font-family:var(--serif-en);font-size:1.12rem;letter-spacing:.08em;color:var(--ink)}
.brand .ja{font-size:.62rem;letter-spacing:.34em;color:var(--ink-soft)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:4px;
  width:42px;height:38px;cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s;
}
.nav-toggle span{top:18px}
.nav-toggle span::before{left:0;right:0;top:-6px}
.nav-toggle span::after{left:0;right:0;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.site-nav ul{display:flex;gap:1.15rem;list-style:none}
.site-nav a{
  color:var(--ink);font-size:.82rem;letter-spacing:.1em;position:relative;padding:.2em 0;
}
.site-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--blade);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--blade)}
@media (max-width:860px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed;top:57px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .4s var(--ease),visibility .4s;
  }
  .site-nav.open{max-height:70vh;visibility:visible}
  .site-nav ul{flex-direction:column;gap:0;padding:.6rem 1.4rem 1.2rem}
  .site-nav li{border-bottom:1px solid var(--line)}
  .site-nav li:last-child{border-bottom:none}
  .site-nav a{display:block;padding:.85em 0;font-size:.92rem}
  html.no-js .site-nav,html.js-fallback .site-nav{position:static;max-height:none;visibility:visible;border-bottom:none}
  html.no-js .nav-toggle,html.js-fallback .nav-toggle{display:none}
}

/* ============ layout ============ */
.wrap{max-width:1080px;margin:0 auto;padding:0 1.2rem}
section{padding:4.2rem 0}
.sec-head{margin-bottom:2.4rem}
.sec-label{
  font-family:var(--serif-en);font-size:.78rem;letter-spacing:.3em;color:var(--blade);
  display:block;margin-bottom:.5em;text-transform:uppercase;
}
h1,h2{font-family:var(--serif-ja);font-weight:400;line-height:1.55;letter-spacing:.06em}
h2{font-size:clamp(1.45rem,3.4vw,1.95rem)}
h3{font-family:var(--serif-ja);font-weight:400;font-size:1.12rem;letter-spacing:.05em;line-height:1.6}
.lead{color:var(--ink-soft);max-width:38em;margin-top:1.1em}
.note{font-size:.78rem;color:var(--ink-soft)}

.alt{background:var(--paper2)}
.night-sec{background:var(--night);color:var(--cream)}
.night-sec .sec-label{color:#8FA3B2}
.night-sec .lead,.night-sec .note{color:#C9C2B4}
.night-sec h2,.night-sec h3{color:var(--cream)}

/* ============ hero: 標本ケース型 ============ */
.hero{padding:96px 0 3.4rem}
.case-grid{
  display:grid;gap:10px;
  grid-template-columns:1.25fr .8fr .8fr;
  grid-template-rows:190px 130px 190px;
  grid-template-areas:
    "sight title title"
    "sight sound scent"
    "touch touch taste";
}
.case-cell{
  position:relative;overflow:hidden;border:1px solid var(--line);
  background:var(--card);border-radius:3px;
}
.cell-sight{grid-area:sight}
.cell-sound{grid-area:sound}
.cell-scent{grid-area:scent}
.cell-taste{grid-area:taste}
.cell-touch{grid-area:touch}
.cell-title{
  grid-area:title;border:none;background:none;display:flex;flex-direction:column;justify-content:center;padding:0 .6rem;
}
.cell-title .en{font-family:var(--serif-en);font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:.06em;line-height:1.15}
.cell-title .catch{font-family:var(--serif-ja);font-size:clamp(1rem,2.2vw,1.3rem);margin-top:.6em}
.cell-title .sub{font-size:.8rem;color:var(--ink-soft);margin-top:.5em;letter-spacing:.12em}
.case-cell img{width:100%;height:100%;object-fit:cover}
.cell-photo img{transition:transform 14s linear}
html.js .cell-photo.kb img{transform:scale(1.04)}
.cell-label{
  position:absolute;left:8px;bottom:6px;z-index:3;
  font-family:var(--serif-en);font-size:.6rem;letter-spacing:.24em;color:#fff;
  text-shadow:0 1px 6px rgba(20,20,20,.65);text-transform:uppercase;
}
.cell-svg{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.4rem;padding:.8rem}
.cell-svg .cell-label{position:static;color:var(--blade);text-shadow:none}
.cell-svg svg{width:56px;height:56px;stroke:var(--blade);fill:none;stroke-width:1.3}
.cell-taste{display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem}
.cell-taste p{font-family:var(--serif-ja);font-size:.86rem;line-height:2;color:var(--ink-soft)}
.cell-taste .cell-label{position:static;color:var(--blade);text-shadow:none;display:block;margin-top:.5em}
@media (prefers-reduced-motion:no-preference){
  html.js .spin{animation:spin 26s linear infinite;transform-origin:50% 50%}
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){
  .hero{padding-top:84px}
  .case-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 220px 150px auto;
    grid-template-areas:
      "title title"
      "sight sight"
      "touch touch"
      "sound scent";
  }
  .cell-title{padding:.4rem .2rem 1rem}
  .cell-taste{grid-area:auto;grid-column:1 / -1}
}

/* ============ R28 刃のひとなで (Blade-Stroke Reveal) ============ */
.blade-reveal{position:relative}
html.js .blade-reveal:not(.stroked){
  clip-path:polygon(0 100%,0 100%,0 100%,0 100%);
}
html.js .blade-reveal.stroked{
  clip-path:polygon(0 -12%,112% 0,100% 100%,0 100%);
  transition:clip-path 1s var(--ease-blade);
}
.blade-reveal::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:-14%;width:3px;
  background:linear-gradient(180deg,transparent,#9FB4C2 30%,#DCE7EE 50%,#9FB4C2 70%,transparent);
  opacity:0;transform:rotate(12deg);pointer-events:none;
}
html.js .blade-reveal.stroked::after{
  animation:blade-shine .5s var(--ease-blade) .55s 1;
}
@keyframes blade-shine{
  0%{opacity:0;left:-14%}
  35%{opacity:.9}
  100%{opacity:0;left:108%}
}
@media (prefers-reduced-motion:reduce){
  html.js .blade-reveal:not(.stroked){clip-path:none}
  html.js .blade-reveal.stroked{clip-path:none;transition:none}
  html.js .blade-reveal.stroked::after{animation:none;content:none}
}
html.js-fallback .blade-reveal{clip-path:none !important}
html.js-fallback .blade-reveal::after{animation:none !important}

/* ============ R1 リビール ============ */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js .rv.on{opacity:1;transform:none}
html.js .rv.d1{transition-delay:.08s}
html.js .rv.d2{transition-delay:.16s}
html.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
}
html.js-fallback .rv{opacity:1 !important;transform:none !important}

/* ============ cards / grids ============ */
.grid-2{display:grid;gap:2rem;grid-template-columns:1fr 1fr}
.grid-3{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:1.7rem 1.5rem;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
html.js .card:hover{transform:translateY(-3px);border-color:var(--blade)}
@media (prefers-reduced-motion:reduce){html.js .card:hover{transform:none}}
.card h3{margin-bottom:.7em}
.card p{font-size:.9rem;color:var(--ink-soft)}

.media-split{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
@media (max-width:820px){.media-split{grid-template-columns:1fr}}
.media-split figure{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--card)}
.media-split figcaption{font-size:.74rem;color:var(--ink-soft);padding:.55em .9em;border-top:1px solid var(--line)}

/* photo strip */
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:700px){.photo-row{grid-template-columns:1fr 1fr}}
.photo-row figure{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--card)}
.photo-row img{width:100%;height:230px;object-fit:cover}
.photo-row figcaption{font-size:.72rem;color:var(--ink-soft);padding:.5em .8em;border-top:1px solid var(--line)}

/* ============ 五感 目録(標本箱) ============ */
.gokan-item{
  display:grid;grid-template-columns:180px 1fr;gap:2rem;
  padding:2.6rem 0;border-top:1px solid var(--line);
}
.gokan-item:last-of-type{border-bottom:1px solid var(--line)}
@media (max-width:700px){.gokan-item{grid-template-columns:1fr;gap:.9rem;padding:2.1rem 0}}
.gokan-no{display:flex;flex-direction:column;gap:.2rem}
.gokan-no .num{font-family:var(--serif-en);font-size:2rem;color:var(--blade);line-height:1}
.gokan-no .en{font-family:var(--serif-en);font-size:.72rem;letter-spacing:.26em;color:var(--ink-soft);text-transform:uppercase}
.gokan-no h2{font-size:1.3rem;margin-top:.3em}
.gokan-body p{color:var(--ink-soft);max-width:38em}
.gokan-body .quote{
  font-family:var(--serif-ja);color:var(--ink);border-left:2px solid var(--blade);
  padding:.35em 0 .35em 1em;margin:1.1em 0;font-size:.98rem;
}
.gokan-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:1.3rem}
.gokan-photos figure{overflow:hidden;border:1px solid var(--line);border-radius:3px}
.gokan-photos img{width:100%;height:180px;object-fit:cover}

/* ============ 引用(似顔絵添え) ============ */
.voice{display:grid;grid-template-columns:88px 1fr;gap:1.3rem;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1.5rem 1.6rem}
.voice .face{width:88px;height:88px;object-fit:cover;object-position:50% 22%;border-radius:50%;border:1px solid var(--line)}
.voice blockquote{font-family:var(--serif-ja);font-size:.98rem;line-height:2}
.voice .src{font-size:.72rem;color:var(--ink-soft);margin-top:.7em;display:block}
@media (max-width:560px){.voice{grid-template-columns:64px 1fr}.voice .face{width:64px;height:64px}}

/* ============ menu 目録 ============ */
.menu-list{border-top:1px solid var(--line)}
.menu-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.05rem .2rem;border-bottom:1px solid var(--line);
}
.menu-row .name{font-family:var(--serif-ja);font-size:1rem}
.menu-row .desc{font-size:.78rem;color:var(--ink-soft);display:block;margin-top:.25em;font-family:var(--sans)}
.menu-row .price{font-family:var(--serif-en);font-size:1rem;white-space:nowrap;color:var(--ink)}

/* ============ CTA ============ */
.cta-pair{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}
.btn{
  display:inline-block;padding:.95em 2.1em;border-radius:3px;
  font-size:.92rem;letter-spacing:.1em;line-height:1.4;
  transition:transform .12s ease-out,background .3s,color .3s,border-color .3s;
  border:1px solid var(--blade);text-align:center;
}
.btn:active{transform:scale(.97)}
.btn-fill{background:var(--blade);color:#FFFFFF}
.btn-fill:hover{background:var(--blade-deep)}
.btn-ghost{color:var(--blade);background:transparent}
.btn-ghost:hover{background:rgba(60,75,87,.08)}
.night-sec .btn-ghost{color:var(--cream);border-color:var(--cream)}
.night-sec .btn-ghost:hover{background:rgba(237,231,218,.1)}
.cta-note{font-size:.78rem;color:var(--ink-soft);margin-top:.9em}
.night-sec .cta-note{color:#C9C2B4}

/* sticky bar (SP) */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta a{
  display:flex;align-items:center;justify-content:center;gap:.4em;
  padding:.95em .5em;font-size:.88rem;letter-spacing:.08em;
}
.sticky-cta .s1{background:var(--blade);color:#fff}
.sticky-cta .s2{background:var(--card);color:var(--ink)}
@media (max-width:860px){
  .sticky-cta{display:grid}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ============ footer ============ */
.site-footer{background:var(--night);color:var(--cream);padding:3.2rem 0 2.2rem;margin-top:0}
.site-footer .brand-f{font-family:var(--serif-en);font-size:1.2rem;letter-spacing:.1em}
.site-footer .addr{font-size:.82rem;color:#C9C2B4;margin-top:.9em;line-height:2}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.6rem}
.site-footer nav a{color:#C9C2B4;font-size:.78rem;letter-spacing:.08em}
.site-footer nav a:hover{color:var(--cream)}
.site-footer .fine{font-size:.68rem;color:#9C968A;margin-top:2rem}

/* ============ forms ============ */
.form{max-width:560px}
.form label{display:block;font-size:.85rem;margin-bottom:.4em;letter-spacing:.06em}
.form .req{color:#A03B2C;font-size:.7rem;margin-left:.4em}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  width:100%;padding:.8em .9em;margin-bottom:1.3rem;
  border:1px solid var(--line);border-radius:3px;background:#fff;
  font-family:inherit;font-size:.95rem;color:var(--ink);
}
.form input:focus,.form textarea:focus{outline:2px solid var(--blade);outline-offset:1px}
.hp-field{position:absolute;left:-9999px;top:-9999px}

/* ============ access ============ */
.info-table{width:100%;border-collapse:collapse;font-size:.92rem}
.info-table th,.info-table td{text-align:left;padding:.95em .4em;border-bottom:1px solid var(--line);vertical-align:top}
.info-table th{font-weight:500;white-space:nowrap;width:9em;color:var(--ink-soft);letter-spacing:.08em}
@media (max-width:420px){.info-table th{width:6.5em;white-space:normal}}
.map-frame{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:1.8rem}
.map-frame iframe{display:block;width:100%;height:380px;border:0}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:1.1rem .2rem;font-size:.96rem;letter-spacing:.04em;
  list-style:none;position:relative;padding-right:2rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--blade);border-bottom:1.5px solid var(--blade);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 .2rem 1.2rem;font-size:.9rem;color:var(--ink-soft)}

/* ============ page hero (下層) ============ */
.page-hero{padding:120px 0 2.6rem}
.page-hero .en{font-family:var(--serif-en);font-size:.8rem;letter-spacing:.32em;color:var(--blade);text-transform:uppercase}
.page-hero h1{font-size:clamp(1.7rem,4.4vw,2.4rem);margin-top:.4em}
.page-hero .lead{margin-top:1.2em}

/* misc */
.tag-line{display:flex;align-items:center;gap:.8em;margin:2.2rem 0 0;color:var(--ink-soft);font-size:.8rem}
.tag-line::before{content:"";width:44px;height:1px;background:var(--wood)}
.center{text-align:center}
.mt-l{margin-top:2.6rem}
.mt-m{margin-top:1.6rem}
figure.frame{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--card)}
figure.frame figcaption{font-size:.74rem;color:var(--ink-soft);padding:.55em .9em;border-top:1px solid var(--line)}

/* reduced-motion: 全トランジション・アニメーションを停止 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}