@charset "UTF-8";
/* =========================================================
   mauʻoli — sp.css (max-width: 768px)
   ========================================================= */
:root { --hd-h: 64px; }

/* ---------- Header ---------- */
.hd { padding: 0 18px; justify-content: space-between; }
.hd__logo img { width: 112px; }
.hd__nav, .hd__cta { display: none; }
.hd__burger { position: relative; z-index: 101; width: 44px; height: 44px; }
.hd__burger span { position: absolute; left: 10px; width: 24px; height: 1px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.hd__burger span:first-child { top: 17px; }
.hd__burger span:last-child { top: 26px; }
.hd.is-menu { color: var(--white); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hd.is-menu .hd__logo-w { opacity: 1; }
.hd.is-menu .hd__logo-n { opacity: 0; }
.hd.is-menu .hd__burger span:first-child { top: 22px; transform: rotate(35deg); }
.hd.is-menu .hd__burger span:last-child { top: 22px; transform: rotate(-35deg); }

/* ---------- HERO (photo top / text below) ---------- */
.hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: var(--hd-h); }
.hero__bg { position: relative; flex: none; height: min(100vw, 50vh); height: min(100vw, 50svh); min-height: 260px; margin: 0 14px; }
.hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 29, 40, 0) 55%, rgba(10, 29, 40, .85) 100%); }
.hero__bg::after { inset: 10px; }
.hero__shade { display: none; }
.hero__deco { right: -30vw; bottom: -10vw; width: 90vw; }
.hero__content { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 26px 24px 70px; }
.hero__kicker span { font-size: 10px; letter-spacing: .3em; }
.hero__kicker span::before { width: 28px; }
.hero__catch { font-size: clamp(52px, 15vw, 80px); margin-top: 10px; }
.hero__h1 { margin-top: 18px; gap: 8px 14px; }
.hero__h1 img { width: 112px; }
.hero__h1 span { flex-basis: 100%; font-size: 11px; letter-spacing: .14em; padding-left: 0; border-left: 0; }
.hero__lead { font-size: 12px; letter-spacing: .1em; margin-top: 10px; }
.hero__btn { margin-top: 20px; font-size: 12px; }
.hero__btn i { width: 44px; height: 44px; }
.hero__badge { right: 26px; top: calc(var(--hd-h) + 22px); width: 96px; height: 96px; }
.hero__badge-c { font-size: 26px; }
.hero__badge-c small { font-size: 9px; }
.hero__scroll { display: none; }
.wave--hero { height: 40px; }
@media (max-height: 700px) {
  .hero__bg { height: 42vh; height: 42svh; min-height: 0; }
  .hero__content { padding: 16px 24px 52px; }
  .hero__catch { font-size: 48px; }
  .hero__h1 { margin-top: 12px; }
  .hero__btn { margin-top: 14px; }
}

/* ---------- Marquee ---------- */
.marquee { padding: 18px 0 10px; }
.marquee span { font-size: 26px; }

/* ---------- CONCEPT ---------- */
.concept { padding: 90px 0 110px; }
.concept .bigword { top: 40px; right: -10px; font-size: 96px; }
.concept__grid { position: relative; z-index: 1; }
.concept__visual { height: 118vw; max-height: 620px; margin-right: 44px; }
.concept__img { height: 100%; }
.concept__text { padding: 56px 24px 0; }
.concept .sec-title { font-size: 25px; }
.concept__body { margin-top: 32px; }
.concept__body p { font-size: 14px; letter-spacing: .1em; line-height: 2.2; }

/* ---------- NUMBERS ---------- */
.numbers { padding: 70px 20px; }
.numbers__list { grid-template-columns: 1fr 1fr; row-gap: 48px; }
.numbers__list li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .12); }
.numbers__v { font-size: 64px; }
.numbers__en { font-size: 14px; }
.numbers__jp { font-size: 11px; }

/* ---------- STORY ---------- */
.story__about { padding: 120px 18px; }
.glass { padding: 44px 26px; }
.glass .sec-title { font-size: 23px; }
.glass p:not(.sec-label) { font-size: 14px; line-height: 2.1; }

/* ---------- HISTORY ---------- */
.history { padding: 100px 24px 110px; }
.history .sec-title { font-size: 23px; }
.timeline { margin-top: 56px; border-left: 1px solid rgba(15, 42, 58, .15); }
.timeline__item { position: relative; padding: 0 0 60px 28px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.timeline__era { font-size: 64px; }
.timeline__era small { font-size: 11px; }
.timeline h3 { font-size: 17px; }
.timeline p:not(.timeline__era) { font-size: 13px; }

/* ---------- COLLECTION (2 columns) ---------- */
.collection { padding: 100px 14px 110px; }
.collection__head { padding: 0 10px; }
.collection .sec-title { font-size: 46px; }
.collection__grid { gap: 36px 12px; margin-top: 40px; }
.collection__grid > li:nth-child(even) { transform: translateY(40px); }
.js .collection__grid > li.rv:nth-child(even):not(.is-in) { transform: translateY(76px); }
.js .collection__grid > li.rv:nth-child(even).is-in { transform: translateY(40px); }
.collection__grid { padding-bottom: 40px; }
.ring__no { padding: 6px 8px; font-size: 11px; }
.ring__body { padding-top: 14px; }
.ring__mean { font-size: 10px; letter-spacing: .16em; }
.ring__name { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px; }
.ring__en { font-size: 22px; letter-spacing: .04em; }
.ring__jp { font-size: 10px; letter-spacing: .14em; }
.ring__cat { display: none; }
.ring__price { margin-top: 10px; padding-top: 8px; }
.ring__price div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ring__price dt { font-size: 11px; letter-spacing: .04em; }
.ring__price dd { font-size: 16px; letter-spacing: .02em; }
.ring--end { padding: 24px 12px; }
.ring__end-en { font-size: 30px; }
.ring__end-jp { font-size: 10px; letter-spacing: 0; line-height: 1.9; margin: 14px 0 18px; word-break: keep-all; }
.ring__end .btn { min-height: 44px; padding: 0 14px; gap: 8px; font-size: 11px; letter-spacing: .06em; }

/* ---------- STATEMENT ---------- */
.statement { padding: 130px 24px; }
.statement__en { font-size: 46px; }
.statement__jp { font-size: 16px; letter-spacing: .16em; }

/* ---------- FAQ ---------- */
.faq { padding: 100px 24px; }
.faq .sec-title { font-size: 23px; }
.faq__list { margin-top: 40px; border-top: 1px solid rgba(15, 42, 58, .15); }
.faq__item summary { font-size: 15px; gap: 14px; padding: 22px 40px 22px 0; }
.faq__q { font-size: 26px; }
.faq__a { padding: 0 0 24px 32px; font-size: 13px; }

/* ---------- SHOPS ---------- */
.shops { padding: 100px 20px 130px; }
.shops .bigword { top: 50px; right: -20px; font-size: 84px; }
.shops .sec-title { font-size: 25px; }
.shops__lead { font-size: 13px; }
.shops__list { display: grid; gap: 22px; margin-top: 44px; }

/* ---------- FOOTER ---------- */
.ft__inner { padding: 90px 24px 110px; }
.ft__logo img { width: 190px; }
.ft__nav { margin-top: 36px; gap: 8px 18px; font-size: 12px; letter-spacing: .14em; }
.ft__copy { margin-top: 44px; font-size: 10px; }
.wave--ft { height: 36px; }

/* ---------- Fixed CTA ---------- */
.fixcta {
  display: flex; align-items: center; justify-content: center;
  position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90;
  height: 54px; border-radius: 27px;
  background: var(--gold); color: var(--deep);
  font-size: 14px; font-weight: 500; letter-spacing: .16em;
  box-shadow: 0 12px 30px rgba(10, 29, 40, .3);
  transform: translateY(140%); transition: transform .6s var(--ease);
}
.fixcta.is-show { transform: none; }
.fixcta span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--deep); margin-right: 12px; vertical-align: middle; }

/* ===== v2.3 additions ===== */
.sec-lead { font-size: 13px; text-align: left; line-height: 2.05; }
.sec-head--center .sec-title { font-size: 22px; }
.ring__more { margin-top: 12px; padding: 10px 10px; min-height: 44px; font-size: 10px; letter-spacing: .06em; }
.ring__more span { font-size: 16px; }

.dlg { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; }
.dlg__photos { grid-template-columns: 1fr 1fr; }
.dlg__body { padding: 26px 20px 40px; }
.dlg__ttl span { font-size: 34px; }
.dlg__btns { grid-template-columns: 1fr; }
.spec div { grid-template-columns: 1fr; gap: 2px; }
.ptable { font-size: 12px; min-width: 520px; }
.ptable td { font-size: 14px; }

.craft { padding: 100px 24px 100px; }
.craft .bigword { font-size: 72px; top: 40px; }
.craft .sec-title { font-size: 24px; }
.craft__row { margin-top: 40px; }
.craft__img { height: 110vw; max-height: 520px; margin: 0 -24px 40px 0; }
.craft__h { font-size: 19px; margin: 40px 0 14px; }
.craft__h:first-child { margin-top: 0; }
.craft__text p:not(.craft__h) { font-size: 14px; }
.craft__text p + p { margin-top: 1em; }
.craft__sub { margin-top: 24px; }
.craft__sub img { width: 96px; height: 96px; }
.feel { margin: 80px -24px 0; padding: 60px 24px; }
.feel__en { font-size: 15px; }
.feel__ttl { font-size: 20px; }
.feel__grid { display: grid; gap: 44px; margin-top: 36px; }
.feel__item h4 { font-size: 18px; }
.feel__item p { font-size: 14px; }
.dia { margin-top: 80px; }
.dia__img { height: 100vw; max-height: 480px; margin: 0 0 40px -24px; }
.dia__text .feel__ttl { font-size: 22px; }
.dia__text h4 { font-size: 17px; margin-top: 28px; }
.dia__text p { font-size: 14px; }
.dia__melee { margin-top: 20px; }

.material { padding: 100px 20px; }
.mat__list { display: grid; gap: 16px; margin-top: 44px; }
.mat { padding: 28px 22px 26px; }
.mat h3 { font-size: 17px; }
.mat__img img { width: 150px; }

.arrange { padding: 100px 16px; }
.arr__grid { display: grid; gap: 18px; margin-top: 44px; }
.arr__img { height: 200px; padding: 16px; }
.arr__img img { max-height: 170px; }
.arr__body { padding: 24px 20px 28px; }
.arr h3 { font-size: 18px; }
.birth { grid-template-columns: repeat(3, 1fr); }
.fonts__s { font-size: 16px; }
.samples { padding: 28px 20px; }
.samples__grid { grid-template-columns: 1fr; gap: 24px; }

.care { padding: 100px 16px; }
.care__top { display: grid; gap: 18px; margin-top: 44px; }
.care__card { padding: 34px 22px; }
.care__card h3 { font-size: 19px; }
.care__big { font-size: 30px; }
.care__maint { margin-top: 70px; padding: 0 6px; }
.care__maint-lead p:last-child { font-size: 14px; }
.care__items { display: grid; gap: 30px; margin-top: 34px; }
.fee { margin: 50px -6px 0; padding: 30px 16px; }
.fee__h { font-size: 18px; }
.fee__plus { font-size: 30px; }
.ftable th, .ftable td { padding: 11px 10px; }
.ftable td { font-size: 15px; }
.fee__ex li { grid-template-columns: 1fr; gap: 0; }
.sp-scroll { color: var(--gold-d); }
.gem img { width: 110px; height: 110px; }
.area-filter { margin-top: 30px; gap: 8px; }
.area-btn { padding: 0 16px; font-size: 12px; }
.shops__list { margin-top: 26px; }
.shop__info div { grid-template-columns: 4.8em 1fr; font-size: 12.5px; }
.sact { font-size: 11.5px; padding: 8px 10px; gap: 8px; }