/* ===========================================================
   Vintage Eyewear 彩
   =========================================================== */
:root{
  --bg:#FBFBF9;
  --bg-alt:#F1F0EC;
  --bg-deep:#E8E7E2;
  --ink:#16161A;
  --ink-2:#4A4A46;
  --ink-3:#8C8C85;
  --line:#DFDED8;
  --pad: clamp(20px, 5vw, 80px);
  --ff-ja:"Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;
  --ff-mc:"Shippori Mincho", "Hiragino Mincho ProN", serif;
  --ff-en:"Cormorant Garamond", Georgia, serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-ja); font-weight:300; font-size:15px; line-height:2;
  letter-spacing:.04em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--ink); color:var(--bg)}
:focus-visible{outline:1px solid var(--ink); outline-offset:3px}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad) 16px;
  transition:background .45s ease, padding .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(251,251,249,.9); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
  padding-top:calc(env(safe-area-inset-top,0px) + 10px); padding-bottom:10px;
}
/* 下層ページは最初から地の色を敷く（ヒーロー写真がないため） */
.nav.is-solid{
  background:rgba(251,251,249,.92); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav__logo img{height:30px; width:auto; transition:height .45s ease}
.nav.is-stuck .nav__logo img{height:26px}
.nav__links{display:flex; gap:clamp(18px,2.4vw,36px)}
.nav__links a{
  font-family:var(--ff-en); font-size:13px; letter-spacing:.2em; color:var(--ink-2);
  position:relative; padding-bottom:3px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav__toggle{display:none; width:26px; height:18px; position:relative}
.nav__toggle span{position:absolute; left:0; width:100%; height:1px; background:var(--ink); transition:.35s}
.nav__toggle span:nth-child(1){top:4px}
.nav__toggle span:nth-child(2){bottom:4px}
.nav__toggle.is-open span:nth-child(1){top:9px; transform:rotate(38deg)}
.nav__toggle.is-open span:nth-child(2){bottom:8px; transform:rotate(-38deg)}

.drawer{
  position:fixed; inset:0; z-index:55; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.drawer.is-open{opacity:1; pointer-events:auto}
.drawer a{font-family:var(--ff-en); font-size:22px; letter-spacing:.24em; color:var(--ink-2)}

/* ---------- HERO ---------- */
.hero{position:relative; height:100svh; min-height:560px; overflow:hidden; display:flex; align-items:center}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(251,251,249,.95) 0%, rgba(251,251,249,.78) 36%, rgba(251,251,249,.2) 68%, rgba(251,251,249,.05) 100%),
    linear-gradient(to bottom, rgba(251,251,249,.55) 0%, rgba(251,251,249,0) 24%);
}
.hero__inner{
  position:relative; z-index:2; padding:0 var(--pad); width:100%;
  animation:rise 1.5s cubic-bezier(.22,1,.36,1) both .15s;
}
.hero__logo{width:clamp(210px,28vw,380px); height:auto; margin-bottom:min(4vh,30px)}
.hero__copy{
  font-family:var(--ff-mc); font-size:clamp(14px,1.5vw,19px); letter-spacing:.14em;
  color:var(--ink); margin:0; max-width:24em;
}
.hero__scroll{
  position:absolute; left:var(--pad); bottom:clamp(24px,5vh,48px); z-index:2;
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-en); font-size:11px; letter-spacing:.3em; color:var(--ink-3);
}
.hero__scroll i{display:block; width:52px; height:1px; background:var(--ink-3); position:relative; overflow:hidden}
.hero__scroll i::after{content:""; position:absolute; inset:0; background:var(--ink); animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes rise{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}

/* ---------- SECTION base ---------- */
.sec{padding:clamp(80px,13vh,170px) var(--pad); position:relative}
.sec__head{max-width:900px; margin:0 auto clamp(40px,6vh,72px); text-align:center}
.sec--about .sec__head{text-align:left; margin-left:0}
.sec__eyebrow{
  font-family:var(--ff-en); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 20px;
}
.sec__title{
  font-family:var(--ff-mc); font-weight:400;
  font-size:clamp(25px,4.2vw,46px); line-height:1.55; letter-spacing:.06em; margin:0;
  text-wrap:balance;
}
.sec__lead{margin:26px 0 0; color:var(--ink-2); font-size:14px; letter-spacing:.1em}

/* ---------- ABOUT ---------- */
.sec--about{background:var(--bg)}
.about__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(36px,6vw,96px); align-items:start; max-width:1240px; margin:0 auto;
}
.about__text p{margin:0 0 1.7em; color:var(--ink-2); max-width:34em}
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.facts li{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:22px 2px; border-bottom:1px solid var(--line);
}
.facts__n{font-family:var(--ff-en); font-size:clamp(24px,3.2vw,38px); line-height:1; letter-spacing:.02em}
.facts__u{font-size:13px; color:var(--ink-2)}
.facts__l{margin-left:auto; font-size:12px; letter-spacing:.2em; color:var(--ink-3)}
.about__strip{margin:clamp(48px,8vh,96px) auto 0; max-width:1560px}
.about__strip img{width:100%; aspect-ratio:21/9; object-fit:cover}

/* ---------- TYPES ---------- */
.sec--types{background:var(--bg-alt)}
.types{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px) clamp(18px,2.4vw,34px);
  max-width:1440px; margin:0 auto;
}
/* mood の行数が違ってもリンクの高さが揃うよう、カードを縦並びにする */
.type{display:flex; flex-direction:column}
.type__pic{
  display:block; background:var(--bg-deep); overflow:hidden; margin-bottom:18px;
  aspect-ratio:4/3;
}
.type__pic img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.type__pic:hover img{transform:scale(1.045)}
.type__ja{
  font-family:var(--ff-mc); font-weight:500; font-size:17px; letter-spacing:.08em;
  margin:0 0 4px;
}
.type__en{
  font-family:var(--ff-en); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;
}
.type__mood{
  list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:6px;
}
.type__mood li{
  font-size:11px; letter-spacing:.06em; line-height:1.9; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:0 10px; background:var(--bg);
}
.type__body{margin:0 0 14px; font-size:13.5px; line-height:1.95; color:var(--ink-2)}
.type__link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:auto;
  font-size:12px; letter-spacing:.14em; color:var(--ink-2);
  border-bottom:1px solid var(--line); padding-bottom:3px; transition:.35s;
}
.type__link:hover{color:var(--ink); border-color:var(--ink)}
.type__link span{font-family:var(--ff-en); font-size:14px; line-height:1}

/* ---------- 在庫グリッド（ジャンル別ページ） ---------- */
.grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  max-width:1320px; margin:0 auto; padding:0 var(--pad);
}
.grid__i{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  background:var(--bg-deep); cursor:zoom-in;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.js .grid__i{opacity:0; transform:translateY(14px)}
.js .grid__i.is-in{opacity:1; transform:none}
.grid__i img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.grid__i:hover img{transform:scale(1.035)}
.grid__i::after{
  content:""; position:absolute; inset:0; background:var(--ink); opacity:0;
  transition:opacity .5s; pointer-events:none;
}
.grid__i:hover::after{opacity:.04}

/* ---------- WEARING (rail) ---------- */
.sec--wearing{background:var(--bg); padding-right:0}
.rail{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--pad) 22px 0; scrollbar-width:thin;
}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}
.rail__i{flex:0 0 auto; width:clamp(230px,26vw,360px); scroll-snap-align:start; cursor:zoom-in; background:var(--bg-deep)}
.rail__i img{width:100%; aspect-ratio:3/4; object-fit:cover}

/* ---------- DETAIL (mosaic) ---------- */
.sec--detail{background:var(--bg-alt)}
.mosaic{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  max-width:1280px; margin:0 auto;
}
.mosaic__i{aspect-ratio:3/4}
.mosaic__i{overflow:hidden; background:var(--bg-deep); cursor:zoom-in}
.mosaic__i img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.mosaic__i:hover img{transform:scale(1.04)}

/* ---------- Wearing の2本目（花） ---------- */
.rail--second .rail__i{width:clamp(200px,22vw,300px)}
/* 写真2列のあいだに挟むコンセプト文 */
.sec--wearing .sec__head{padding-right:var(--pad)}
.wearing__copy{
  font-family:var(--ff-mc); font-size:clamp(17px,2.3vw,27px); line-height:2.05; letter-spacing:.1em;
  text-align:center; margin:clamp(26px,4.2vh,50px) auto; padding-right:var(--pad); color:var(--ink);
  max-width:34em;
}

/* ---------- POPUP ---------- */
.sec--popup{background:var(--bg)}
.popup__inner{max-width:760px; margin:0 auto}
.popup__text{margin-bottom:40px}
.popup__text p{margin:0 0 1.7em; color:var(--ink-2)}
.info{margin:0 0 40px; border-top:1px solid var(--line)}
.info div{display:grid; grid-template-columns:96px 1fr; gap:16px; padding:18px 2px; border-bottom:1px solid var(--line)}
.info dt{font-size:12px; letter-spacing:.2em; color:var(--ink-3); margin:0; line-height:2.1}
.info dd{margin:0; font-size:14px; color:var(--ink-2)}

/* ---------- links ---------- */
.links{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.links a{
  display:flex; flex-direction:column; gap:4px; height:100%;
  padding:24px 22px; border:1px solid var(--line); background:var(--bg);
  transition:.4s cubic-bezier(.22,1,.36,1);
}
.links a:hover{background:var(--ink); border-color:var(--ink)}
.links__en{font-family:var(--ff-en); font-size:19px; letter-spacing:.14em; line-height:1.2}
.links__id{font-size:11.5px; letter-spacing:.08em; color:var(--ink-3); line-height:1.7}
.links__note{font-size:12.5px; color:var(--ink-2); line-height:1.8; margin-top:6px}
.links a:hover .links__en{color:var(--bg)}
.links a:hover .links__id{color:var(--bg-deep)}
.links a:hover .links__note{color:var(--bg-alt)}

/* ---------- FOOTER ---------- */
.foot{
  background:var(--bg-alt); text-align:center;
  padding:clamp(70px,11vh,130px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 44px);
  border-top:1px solid var(--line);
}
.foot__emblem{width:clamp(110px,13vw,150px); height:auto; margin:0 auto 34px; opacity:.9}
.foot__links{display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(20px,4vw,44px)}
.foot__links a{
  font-family:var(--ff-en); font-size:14px; letter-spacing:.22em; color:var(--ink-2);
  border-bottom:1px solid var(--line); padding-bottom:4px; transition:.4s;
}
.foot__links a:hover{color:var(--ink); border-color:var(--ink)}
.foot__c{font-size:11px; letter-spacing:.18em; color:var(--ink-3); margin:44px 0 0}

/* ---------- LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:100; background:rgba(238,237,233,.97);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.lb.is-open{opacity:1; pointer-events:auto}
.lb__fig{margin:0; max-width:min(92vw,1100px); max-height:86vh; display:flex}
.lb__fig img{
  max-width:100%; max-height:86vh; width:auto; height:auto; object-fit:contain;
  box-shadow:0 20px 70px rgba(0,0,0,.1);
}
.lb__close{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 16px); right:20px;
  font-size:30px; line-height:1; width:46px; height:46px; color:var(--ink-2);
}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; font-size:40px; line-height:1; color:var(--ink-2);
  transition:color .3s;
}
.lb__nav:hover{color:var(--ink)}
.lb__nav--prev{left:8px}
.lb__nav--next{right:8px}
.lb__count{
  position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 22px); left:50%; transform:translateX(-50%);
  font-family:var(--ff-en); font-size:13px; letter-spacing:.24em; color:var(--ink-3); margin:0;
}

/* ---------- ジャンル別ページ ---------- */
.tp{
  max-width:1320px; margin:0 auto; text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + clamp(108px,15vh,170px)) var(--pad) clamp(34px,5vh,58px);
}
.tp__back{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:clamp(28px,5vh,52px);
  font-size:12px; letter-spacing:.16em; color:var(--ink-3); transition:color .35s;
}
.tp__back span{font-family:var(--ff-en); font-size:15px; line-height:1}
.tp__back:hover{color:var(--ink)}
.tp__title{
  font-family:var(--ff-mc); font-weight:400; font-size:clamp(27px,4.8vw,50px);
  line-height:1.4; letter-spacing:.08em; margin:0 0 20px;
}
.tp__mood{justify-content:center; margin:0 0 22px}
.tp__body{margin:0 auto; max-width:30em; color:var(--ink-2); font-size:14.5px}
.tp__note{
  margin:clamp(22px,3.4vh,34px) auto 0; max-width:30em;
  color:var(--ink-3); font-size:12px; letter-spacing:.08em; line-height:2;
}
.tp__other{
  background:var(--bg-alt); border-top:1px solid var(--line);
  margin-top:clamp(70px,11vh,130px); padding:clamp(56px,9vh,110px) var(--pad);
}
.tp__otherhead{
  font-family:var(--ff-en); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-3); text-align:center; margin:0 0 clamp(24px,4vh,38px);
}
.other{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,26px) 14px;
  max-width:1100px; margin:0 auto;
}
.other__i{display:block; text-align:center}
.other__pic{display:block; overflow:hidden; background:var(--bg-deep); aspect-ratio:4/3; margin-bottom:10px}
.other__pic img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.22,1,.36,1)}
.other__i:hover .other__pic img{transform:scale(1.05)}
.other__ja{display:block; font-size:12px; letter-spacing:.06em; color:var(--ink-2); line-height:1.7}
.sec--cta{background:var(--bg)}

/* ---------- reveal ---------- */
.reveal{transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1)}
.js .reveal{opacity:0; transform:translateY(20px)}
.js .reveal.is-in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about__grid{grid-template-columns:1fr; gap:40px}
  }
@media (max-width:760px){
  body{font-size:14.5px; line-height:1.95}
  .nav__links{display:none}
  .nav__toggle{display:block}
  .grid{gap:10px}
  .other{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px}
  .types{grid-template-columns:1fr; gap:36px}
  .mosaic{grid-template-columns:repeat(2,1fr); gap:10px}
  .mosaic__i:last-child{grid-column:span 2; aspect-ratio:16/10}
      .facts li{padding:18px 2px}
  .facts__l{margin-left:0; width:100%}
  .info div{grid-template-columns:1fr; gap:2px; padding:14px 2px}
  .links{grid-template-columns:1fr; gap:10px}
  .links a{padding:20px}
  .hero__copy{max-width:18em}
  .lb__nav{width:44px; height:44px; font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}